用JavaScript编写弹出遮罩层的原理分析及初步实现
来源:互联网 发布:nestopia mac 设置 编辑:程序博客网 时间:2024/06/06 15:41
目录
基本原理
具体步骤
完整实例代码
兼容性检查
总结
基本原理
在上一篇文章《用JavaScript编写弹出层原理分析及初步实现》中,已经介绍了用JS编写弹出层的原理。遮罩层的原理实质上与弹出层是一样的,只是属性设置不一样。
遮罩层,是一个div完整覆盖整个窗口。其属性需要流出文档,设置定位方式,即position:fixed; z-index:1。同时需要设置div的宽度、高度和浏览器窗口大小相同,即width:100%;height:100%。利用固定定位fixed进行定位设置,代码如下:
<html> <head> <title>无标题文档</title> <style> #zhe{ position:fixed; z-index:1; top:0px; left:0px; width:100%; height:100%; background-color:#CCC; } </style> </head> <body> 这是底页面,如果看见,说明浏览器不支持position:fixed <div id="zhe"> </div> </body> </html>
具体步骤
因为原理同弹出层,所以具体步骤也同弹出层的步骤,只是属性稍有不同,这里不再写明具体步骤,参照《用JavaScript编写弹出层原理分析及初步实现》。
完整实例代码
<html> <head> <script language="javascript"> <!-- function show(){ var newDiv=document.createElement("div");//创建div节点 //设置div属性 newDiv.style.position="fixed"; newDiv.style.zIndex="1"; newDiv.style.width = "100%"; newDiv.style.height = "100%"; newDiv.style.top = "0px"; newDiv.style.left = "0px"; newDiv.style.background="#CCCCCC"; document.body.appendChild(newDiv);//添加div节点 } //--> </script> <title>无标题文档</title> </head> <body> 这是底页面<a href="javascript:show()">点击弹出遮罩层</a><br /> </body> </html>
兼容性检查
- Trident(IE内核):IE6、IE7、IE8、IE9均未通过
- Gecko(FF内核):火狐检查通过
- Webkit:谷歌检查通过
总结
采用该方法,存在严重的兼容问题,IE浏览器基本上不支持,不支持的原因是IE浏览器不支持position:fixed属性。
本作品采用知识共享署名-非商业性使用 3.0 Unported许可协议进行许可。
- 用JavaScript编写弹出层原理分析及初步实现
- 用JavaScript编写弹出遮罩层的原理分析及初步实现
- 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
- JavaScript的提升行为及原理分析
- JavaScript定时器实现的原理分析
- JavaScript 预解析的原理及实现
- 初步记录编写sql的分析流程
- B树的原理分析及实现
- 简易软盘镜像工具的实现及操作系统编写初步
- 检测用户是否禁用JavaScript的原理分析及解决方案
- Shellcode的原理及编写
- Shellcode的原理及编写
- Shellcode的原理及编写
- Shellcode的原理及编写
- 初步掌握Yarn的架构及原理
- 初步掌握Yarn的架构及原理
- 弹出框(tooltip)模态modal框的实现原理及Jquery的一个实现实例
- shared_ptr原理分析及实现
- 垃圾回收机制与引用类型
- 实例化需求术语解读
- ARM:Ecosystem是行动市场致胜关键
- 异常和错误
- css-input与文字的对齐
- 用JavaScript编写弹出遮罩层的原理分析及初步实现
- 9 个指导开发者快速编码/学习的网站推荐
- 服务器追加1对新硬盘并做RAID1
- perl将一个文件中的特定行写入到另一个文件中
- JDBC访问数据库的基本步骤(Oracle数据库为例)
- The command could not be located because '/usr/bin' is not included
- android wpa_supplicant 流程分析
- 中国剩余定理
- saf文件代码