网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
内容
    这篇文章主要介绍了使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享,编写半透明遮罩层时要注意定位问题、不要满屏遮罩,需要的朋友可以参考下
    CSS+JavaScript
    实现原理:
    创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=" utf-8"> 
    <meta name="author" content="http://www.jb51.net/" /> 
    <title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</title> 
    <style type="text/css"> 
    * 
    { 
     margin:0px; 
     padding:0px; 
    } 
    .zhezhao 
    { 
     width:100%; 
     height:100%; 
     background-color:#000; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     opacity:0.5; 
     position:absolute; 
     left:0px; 
     top:0px; 
     display:none; 
     z-index:1000; 
    } 
    .login 
    { 
     width:280px; 
     height:180px; 
     position:absolute; 
     top:200px; 
     left:50%; 
     background-color:#000; 
     margin-left:-140px; 
     display:none; 
     z-index:1500; 
    } 
    .content 
    { 
     margin-top:50px; 
     color:red; 
     line-height:200px; 
     height:200px; 
     text-align:center; 
    } 
    </style> 
    <script type="text/javascript"> 
    window.onload=function() 
    { 
     var zhezhao=document.getElementById("zhezhao"); 
     var login=document.getElementById("login"); 
     var bt=document.getElementById("bt"); 
     var btclose=document.getElementById("btclose"); 
     bt.onclick=function() 
     { 
     zhezhao.style.display="block"; 
     login.style.display="block"; 
     } 
     btclose.onclick=function() 
     { 
     zhezhao.style.display="none"; 
     login.style.display="none"; 
     } 
    } 
    </script> 
    </head> 
    <body> 
     <div id="zhezhao"></div> 
     <div id="login"><button id="btclose">点击关闭</button></div> 
     <div>脚本之家欢迎您，<button id="bt">点击弹出遮罩</button></div> 
    </body> 
    </html>
    以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。
    纯JavaScript：
    实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。
    难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。
    实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉 。
    代码：
    <script language="javascript"> 
    function Open() 
    { 
     //隐藏select控件 
     DispalySelect(0); 
     //显示遮罩层 
     document.getElementById("divPageMask").style.display="block"; 
     //处理遮罩层 
     resizeMask(); 
     window.onResize = resizeMask; 
     //显示弹出窗口 
     document.getElementById("divOpenWin").style.display="block"; 
    } 
    function Close() 
    { 
     //显示select控件 
     DispalySelect(1); 
     //处理遮罩层 
     divPageMask.style.width = "0px"; 
     divPageMask.style.height = "0px"; 
     divOpenWin.style.display = "none"; 
     window.onResize = null; 
     document.getElementById("divOpenWin").style.display="none"; 
    } 
    //页面遮罩 
    function resizeMask() 
    { 
     divPageMask.style.width = document.body.scrollWidth; 
     divPageMask.style.height = document.body.scrollHeight; 
     divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2); 
     divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2); 
    } 
    function DispalySelect(val) 
    { //显示和隐藏select控件 
     var dispalyType; 
     var arrdispalyType=["hidden","visible"]; 
     var arrObjSelect=document.getElementsByTagName("select"); 
     for (i=0;i<arrObjSelect.length;i++) 
     { 
     arrObjSelect[i].style.visibility=arrdispalyType[val]; 
     } 
    } 
    </script> 
    <style type="text/css"> 
    .body,td{font-size:12px}
    #divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;} 
    #divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px} 
    </style> 
    <div id="divPageMask"></div> 
    <div id="divOpenWin"><center><a href="javascript:Close();">关闭</a></center></div> 
    <label></label> 
    <center> 
     <table cellpadding="0" cellspacing="0" width="650"> 
     <tbody> 
     <tr> 
     <td colspan="2" height="90"><p><img src="/uploads/202504/02/logo3531.gif" height="60" width="250"></p> 
     <p> </p> 
     <p> </p></td> 
     </tr> 
     <tr> 
     <td height="10"> </td> 
     </tr> 
     </tbody> 
     </table> 
     <table bgcolor="#e1e1e1" cellpadding="0" cellspacing="1" height="85" width="650"> 
     <tbody> 
     <tr> 
     <td bgcolor="#f9f9f9"><table height=50 cellspacing=0 cellpadding=0 width=600> 
     <FORM name="f" action="http://www.sopull.com/ShopList.asp"> 
     <tbody> 
     <tr> 
     <td>关键字：</td> 
     <td width="241"><input type="text" name="k" size=30 /></td> 
     <td align=middle width=101>所在地：</td> 
     <td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td> 
     <td align=middle width=95><input name="s" type=submit value=" 搜 铺 "></td> 
     </tr> 
     </form> 
     <tr> 
     <td width="64" height="30"> </td> 
     <td colspan="4" valign="middle">例如：餐厅；电器；超市 
     </table></td> 
     </tr> 
     </tbody> 
     </table> 
    </center> 
    <p> </p> 
    <p><a href="javascript:Open();">打开遮罩</a></p> 
    <p> </p> 
    <table width="650" cellpadding="0" cellspacing="0"> 
     <tbody> 
     <!-- <tr> 
     <td background="Images/Index/line_2.gif" width="580"><img src="Images/Index/line_2.gif" height="9" width="9"></td> 
     </tr>--> 
     <tr> 
     <td height="30"><a href="#" target=_blank><font color="#FF6600">免费提交店铺</font></a> |  <a href="#">店铺推广</a> |  <a href="#">关于搜铺</a> |  <a class=b href="#" target=_blank>业务合作</a>  |  <a onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" href="http://www.sopull.com/#">设为首页</a> |  <a onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜铺网-中国最大店铺搜索引擎')" href="http://www.sopull.com/#">加入收藏</a> </td> 
     </tr> 
     <tr> 
     <td height="30">©2007 搜铺网     粤ICP备07006767号</td> 
     </tr> 
     </tbody> 
    </table> 
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/26 5:17:19