用JavaScript编写弹出遮罩层的原理分析及初步实现

最新推荐文章于 2024-04-20 11:50:28 发布

guaguapi_ndsc

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量522

点赞数

分类专栏： JavaScript 文章标签： javascript div 文档 function 浏览器 html

本文链接：https://blog.csdn.net/guaguapi_ndsc/article/details/7956222

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本原理

具体步骤

完整实例代码

兼容性检查

总结

基本原理

在上一篇文章《用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许可协议进行许可。

guaguapi_ndsc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript编写弹出遮罩层的原理分析及初步实现

目录基本原理具体步骤完整实例代码兼容性检查总结基本原理在上一篇文章《用JavaScript编写弹出层原理分析及初步实现》中，已经介绍了用JS编写弹出层的原理。遮罩层的原理实质上与弹出层是一样的，只是属性设置不一样。遮罩层，是一个d
复制链接

扫一扫