使用 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优化尝试小结
Feb 06 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
javascript实现简易计算器的代码
May 31 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP与SQL注入攻击[二]
2007/04/17 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
python生成器generator用法实例分析
2015/06/04 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
服装厂厂长职责
2013/12/16 职场文书
授权委托书样本
2014/04/03 职场文书
南京青奥会口号
2014/06/12 职场文书
教室标语大全
2014/06/21 职场文书
2014年司机工作总结
2014/11/21 职场文书
教师年终个人总结
2015/02/11 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
西游降魔篇观后感
2015/06/15 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL