使用 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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
ES6新增的数组知识实例小结
May 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
星际中的相关伤害
2020/03/04 星际争霸
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php实现登录页面的简单实例
2019/09/29 PHP
javascript 函数调用规则
2009/08/26 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
ES6解构赋值实例详解
2017/10/31 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
公司部门司机岗位职责
2014/01/03 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
学校节能减排倡议书
2014/05/16 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
高效课堂教学反思
2016/02/24 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记