使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
CSS+JavaScript
实现原理:
创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="author"content="https://www.nhooo.com/"/> <title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-毛票票</title> <styletype="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> <scripttype="text/javascript"> window.onload=function() { varzhezhao=document.getElementById("zhezhao"); varlogin=document.getElementById("login"); varbt=document.getElementById("bt"); varbtclose=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> <divclass="zhezhao"id="zhezhao"></div> <divclass="login"id="login"><buttonid="btclose">点击关闭</button></div> <divclass="content">毛票票欢迎您,<buttonid="bt">点击弹出遮罩</button></div> </body> </html>
以上实现了基本的遮罩功能,当点击弹出遮罩,会弹出一个对象,当点击关闭,遮罩效果消失。
纯JavaScript:
实现效果:弹出一个窗口的时候,窗口后面的页面变暗,并且不能操作。
难点:因为div层是不能把select控件遮住的,所以要特殊处理,方法两种,一种是在弹出窗口下面加一层iframe来遮住select;第二种是所以要在弹出的时候,先把select控件隐藏,这里选择第二种方法。
实现原理:在页面上和弹出窗口中间加一个半透明的层,把页面的内容覆盖掉。
代码:
<scriptlanguage="javascript"> functionOpen() { //隐藏select控件 DispalySelect(0); //显示遮罩层 document.getElementById("divPageMask").style.display="block"; //处理遮罩层 resizeMask(); window.onResize=resizeMask; //显示弹出窗口 document.getElementById("divOpenWin").style.display="block"; } functionClose() { //显示select控件 DispalySelect(1); //处理遮罩层 divPageMask.style.width="0px"; divPageMask.style.height="0px"; divOpenWin.style.display="none"; window.onResize=null; document.getElementById("divOpenWin").style.display="none"; } //页面遮罩 functionresizeMask() { 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); } functionDispalySelect(val) {//显示和隐藏select控件 vardispalyType; vararrdispalyType=["hidden","visible"]; vararrObjSelect=document.getElementsByTagName("select"); for(i=0;i<arrObjSelect.length;i++) { arrObjSelect[i].style.visibility=arrdispalyType[val]; } } </script> <styletype="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> <divid="divPageMask"></div> <divid="divOpenWin"><center><ahref="javascript:Close();">关闭</a></center></div> <label></label> <center> <tableborder="0"cellpadding="0"cellspacing="0"width="650"> <tbody> <tr> <tdcolspan="2"align="center"height="90"><p><imgsrc="http://www.sopull.com/Images/Index/logo.gif"height="60"width="250"></p> <p> </p> <p> </p></td> </tr> <tr> <tdheight="10"style="color:#666666;font-size:13px"> </td> </tr> </tbody> </table> <tablebgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="1"height="85"width="650"> <tbody> <tr> <tdalign="center"bgcolor="#f9f9f9"><tableheight=50cellspacing=0cellpadding=0width=600style="margin-top:20px"> <FORMname="f"action="http://www.sopull.com/ShopList.asp"> <tbody> <tr> <tdclass="searchbar_word">关键字:</td> <tdwidth="241"><inputtype="text"name="k"size=30/></td> <tdalign=middlewidth=101class="searchbar_word">所在地:</td> <tdalign=middlewidth=97id="cn"><scriptlanguage="javascript"src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td> <tdalign=middlewidth=95><inputname="s"type=submitvalue="搜铺"></td> </tr> </form> <tr> <tdwidth="64"height="30"> </td> <tdcolspan="4"valign="middle"class="search_text">例如:餐厅;电器;超市 </table></td> </tr> </tbody> </table> </center> <palign="center"> </p> <palign="center"><ahref="javascript:Open();">打开遮罩</a></p> <palign="center"> </p> <tablewidth="650"border="0"align="center"cellpadding="0"cellspacing="0"> <tbody> <!--<tr> <tdalign="center"background="Images/Index/line_2.gif"width="580"><imgsrc="Images/Index/line_2.gif"height="9"width="9"></td> </tr>--> <tr> <tdclass="link"align="center"height="30"><ahref="#"target=_blank><fontcolor="#FF6600">免费提交店铺</font></a> | <aclass="toplink"href="#">店铺推广</a> | <aclass="toplink"href="#">关于搜铺</a> | <aclass=bhref="#"target=_blank>业务合作</a> | <aclass="toplink"onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');returnfalse;"href="http://www.sopull.com/#">设为首页</a> | <aclass="toplink"onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜铺网-中国最大店铺搜索引擎')"href="http://www.sopull.com/#">加入收藏</a></td> </tr> <tr> <tdalign="center"height="30">©2007搜铺网 粤ICP备07006767号</td> </tr> </tbody> </table>