使用 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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
javascript中常用编程知识
Apr 08 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
前端js中的事件循环eventloop机制详解
May 15 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
详解Angular2响应式表单
2017/06/14 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python交互环境下实现输入代码
2018/06/22 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
就业表自我评价分享
2014/02/06 职场文书
校运会入场式解说词
2014/02/10 职场文书
护理专业自荐信范文
2014/02/26 职场文书
水电工岗位职责
2015/02/14 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server