使用 bootstrap modal遇到的问题小结


Posted in Javascript onNovember 09, 2016

bootstrap提供了一个写好的css文件和js文件然而在使用时遇到了一下并不是很好的问题,今天在使用弹出对话框时遇到了一个这样的问题

使用 bootstrap modal遇到的问题小结

上述代码

<a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" >点击"无ESC关闭,无遮蔽背景"演示</a>
<div class="modal" id="myModal">
 <div class="modal-header">
 <a class="close" data-dismiss="modal">×</a>
 <h3>对话框标题</h3>
 </div>
 <div class="modal-body">
 <p>对话框内容</p>
 </div>
 <div class="modal-footer">
 <a href="#" class="btn">关闭</a>
 <a href="#" class="btn btn-primary">保存更新</a>
 </div>
</div>

问题是当单机对话框的边缘时就是阴暗的背影时对话框自动消失,查看了bootstrap的官网也没找到最后在中文翻译的网站http://wrongwaycn.github.com/bootstrap/docs/javascript.html找到原因了是因为data-backdrop设置为true当设置为false时背景就消失了

使用 bootstrap modal遇到的问题小结

背景消失但是下面的所有按钮都是可单机的与原来的弹出对话框截然不同

找了一下午找了一个解决方案就是在就是在对话框下面body上面铺一层div背景色设置为black 透明度设置为0.5

div设置的属性是Z-index为正数

position:absolute;
 left:0px;
 top:0px;
 z-index:100;

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

写一段脚本语言

$(document).ready(function(){
var width=document.body.clientWidth;//网页可见区域宽
var height=document.body.clentHeight;//网页可见区域高
$("<div style='width:"+width+" height:"+height+" position:absolate ;left:0px;top:0px;z-index:100'></div>").appendTo("bofy");
});

这样就实现覆盖了,具体单机时覆盖单机时覆盖解除,很简单就能做到

下面来写一下获取屏幕,浏览器,网页的宽高

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

-------------------

技术要点

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

PS:bootstrap modal draggable问题小结

最近项目中用到了bootstrap modal框,想为其实现draggable效果,在为其添加js代码$('.modal-dialog').draggable()后结果还是没有draggable效果,后面发现是在 另一处代码块存在doc[0].ondragstart = doc[0].onselectstart = function () { return false; }(此处禁用了draggable事件),当删除该处代码后结果就能实现draggable效果。

以上所述是小编给大家介绍的使用 bootstrap modal遇到的问题小结,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
BootStrap中的表单大全
Sep 07 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
js实现文字选中分享功能
Jan 25 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
微信小程序 网络API Websocket详解
Nov 09 #Javascript
微信小程序 网络API 上传、下载详解
Nov 09 #Javascript
微信小程序 网络API发起请求详解
Nov 09 #Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 #Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 #Javascript
微信小程序 loading 详解及实例代码
Nov 09 #Javascript
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python函数中的可变长参数详解
2019/09/12 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Django视图扩展类知识点详解
2019/10/25 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
户外拓展活动方案
2014/02/11 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
刘胡兰观后感
2015/06/16 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python