打开APP
userphoto
未登录

开通VIP，畅享免费电子书等14项超值服

开通VIP

首页

好书

留言交流

下载APP

联系客服
制作网页遮罩
userphoto 关注
分类： JAVASCRIPT 2010-04-01 11:13 1388人阅读 评论(0) 收藏 举报

一、制作全屏遮罩层

要求：1、半透明遮罩整个网页

         2、屏蔽用户对遮罩层下方元素的操作

 

制作：

1、获取遮罩层的宽高

     因为主要覆盖的目的主要是屏蔽用户的部分操作，所以只要覆盖浏览器内容就好了，也就是说覆盖body部分。

       使用：document.body.clientWidth、document.body.clientHeight。

                    此方法各浏览器通用，获取的是目前BODY的宽高。

2、获取了遮罩层的宽高后，我们只要为其定义 absolute ，然后将其固定到左上角。再设置其透明度就可以了。

 

用document.body.clientWidth有一个缺点，他如果用户缩小浏览器窗口，再扩大浏览器窗口，扩大的部分不会被遮罩住。

为了得到到好的交易，宽度简单的用 div.style.width = "100%" 就可以了。

 

遮罩 1.0 JS代码

[javascript] view plaincopy
  1. /************************************************** 
  2.  * dom-drag.js 
  3.  * 09.25.2001 
  4.  * www.youngpup.net 
  5.  * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005 
  6.  ************************************************** 
  7.  * 10.28.2001 - fixed minor bug where events 
  8.  * sometimes fired off the handle, not the root. 
  9.  **************************************************/  
  10. function pageWidth(){  
  11.     return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;  
  12. }  
  13. function fBigDiv(){  
  14.     var sWidth = "100%";  
  15.     var sHeight = document.body.clientHeight > window.screen.availHeight?document.body.clientHeight:window.screen.availHeight;  
  16.     var div = document.createElement("div");  
  17.     div.setAttribute("id","BigDiv");  
  18.     div.style.width = sWidth;  
  19.     div.style.height = sHeight + "px";  
  20.     div.style.position = "absolute";      
  21.     div.style.top = "0px";  
  22.     div.style.left = "0px";  
  23.     div.style.zIndex = 5000;  
  24.     div.style.backgroundColor = "#777"  
  25.     div.style.filter = "Alpha(opacity=60)";  
  26.     div.style.opacity = "0.6";  
  27.     document.body.appendChild(div);  
  28.     var sMyDiv =document.getElementById("MyDiv");  
  29.     sMyDiv.style.top = "300px";  
  30.     sMyDiv.style.left = "300px";  
  31.     sMyDiv.style.display = "block";  
  32. }  
  33.   
  34. window.onload=function(){  
  35.     document.getElementById("button1").onclick = function(){  
  36.         fBigDiv();  
  37.     }  
  38.     document.getElementById("button2").onclick = function(){  
  39.         document.getElementById("MyDiv").style.display="none";  
  40.         document.body.removeChild(BigDiv);  
  41.     }  
  42. }  

 

HTML部分

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  5.   <head>  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  7.     <title>遮罩</title>  
  8.     <mce:script src="2.js" mce_src="2.js" type="text/javascript"></mce:script>  
  9.   </head>  
  10. <mce:style type="text/css"><!--  
  11. body{  
  12.     padding:0;  
  13.     margin:0;  
  14.     text-align:center;  
  15. }  
  16. #warp{  
  17.     text-align:left;  
  18.     margin:0 auto;  
  19. }  
  20. #textBox{  
  21.     margin:0 auto;  
  22.     width:100%;  
  23.     height:600px;  
  24. }  
  25. .button{  
  26.     margin-left:130px;  
  27. }  
  28. #MyDiv{  
  29.   position:absolute;  
  30.   width:200px;  
  31.   height:200px;  
  32.   font-size:12px;  
  33.   background:#666;  
  34.   border:1px solid #000;  
  35.   z-index:5001;  
  36.   display:none;  
  37.   text-align:center;  
  38. }  
  39. --></mce:style><style type="text/css" mce_bogus="1">body{  
  40.     padding:0;  
  41.     margin:0;  
  42.     text-align:center;  
  43. }  
  44. #warp{  
  45.     text-align:left;  
  46.     margin:0 auto;  
  47. }  
  48. #textBox{  
  49.     margin:0 auto;  
  50.     width:100%;  
  51.     height:600px;  
  52. }  
  53. .button{  
  54.     margin-left:130px;  
  55. }  
  56. #MyDiv{  
  57.   position:absolute;  
  58.   width:200px;  
  59.   height:200px;  
  60.   font-size:12px;  
  61.   background:#666;  
  62.   border:1px solid #000;  
  63.   z-index:5001;  
  64.   display:none;  
  65.   text-align:center;  
  66. }</style>  
  67. <body>  
  68.   
  69. <div id="warp">  
  70.     <div style="width:300px; margin:0 auto;">  
  71.     <p id="textBox">  
  72.     </p>  
  73.     <input type="button" id="button1" class="button" value="确定" />  
  74.     </div>  
  75.     <div id="MyDiv">  
  76.     <h1>点击按钮关闭</h1>  
  77.     <input type="button" id="button2" class="button" value="关闭" />  
  78.     </div>  
  79. </div>  
  80.   
  81. </body>  
  82. </html>  


本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。
打开APP，阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序，算一算2024你的财运
js获取浏览器高度和宽度值(多浏览器)
JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
JavaScript Window
搞清楚scrollHeight，scrollLeft，scrollTop，scrollWidth提升页面兼容浏览器
document.documentElement.clientWidth
用Javascript获取页面元素的位置
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权！
如果VIP功能使用有故障，
可点击这里联系客服！

联系客服