使用 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 学习 几种常用方法
Jun 11 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue常用指令详解分析
Aug 19 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 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
解析php中die(),exit(),return的区别
2013/06/20 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
简单使用Python自动生成文章
2014/12/25 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python测试模块doctest使用解析
2019/08/10 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
保险经纪人求职信
2014/03/11 职场文书
老龄工作先进事迹
2014/08/15 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
python tkinter模块的简单使用
2021/04/07 Python
logback 实现给变量指定默认值
2021/08/30 Java/Android
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript