JavaScript动态弹出层，点击渐渐封锁结果

发布时间：2018-08-17 11:43:49 所属栏目：活动来源：站长网

导读：Java Script动态弹出层，点击渐渐封锁结果。挪用方法：onclick=ChuangJianDIV('要弹出的组建ID','弹出DIV的宽','弹出DIV的高','掩蔽div的透明度','弹出div的速率','掩蔽div的配景致','弹出div的配景致'); 如：onclick=ChuangJianDIV('divID','500','300',

　　JavaScript动态弹出层，点击渐渐封锁结果。

　　挪用方法：onclick="ChuangJianDIV('要弹出的组建ID','弹出DIV的宽','弹出DIV的高','掩蔽div的透明度','弹出div的速率','掩蔽div的配景致','弹出div的配景致');"
　　如：onclick="ChuangJianDIV('divID','500','300','50','50','#000000','White');"
　　挪用时第一个参数必选，别的参数可选，默认配置传""值
　　封锁方法：封锁时在要弹出的组建中插手变乱onclick="Close()";即可

　　示例：

<html> <head> <title>JS弹出层</title> <script type="text/javascript"> var addObj="obj";//要弹出的潜匿的DIV的ID var addWidth="300"; var addHeight="180"; var TouMingDu="30";//配置配景层的透明度 var SuDu="10";//配置弹出DIV的速率，值越小速率越大 var ZhenBiColor = "#000000"; var DIVColor="White"; //必选 szaddObj：潜匿DIV的值如"obj"， //可选 szTouMingDu配景层的透明度值小越透明如 "30"， //可选 szSuDu弹出div的速率值越小速率越大如 "10" //可选 szZhenBiColor 透明层的颜色如"#000000" //可选 szDIVColor 弹出div的颜色如"White"； function ChuangJianDIV(szaddObj,szaddWidth,szaddHeight,szTouMingDu,szSuDu,szZhenBiColor,szDIVColor) { if(szaddObj==null) { alert("要弹出的潜匿div的id不能空"); return; } if(szaddObj!=null&&szaddObj!="")addObj = szaddObj; if(szaddWidth!=null&&szaddWidth!="")addWidth = szaddWidth; if(szaddHeight!=null&&szaddHeight!="")addHeight = szaddHeight; if(szTouMingDu!=null&&szTouMingDu!="")TouMingDu=szTouMingDu; if(szSuDu!=null&&szSuDu!="")SuDu = szSuDu; if(szZhenBiColor!=null&&szZhenBiColor!="")ZhenBiColor=szZhenBiColor; if(szDIVColor!=null&&szDIVColor!="")DIVColor=szDIVColor; ZhenBi(); DIV(); JiaZhaiDiv(); } //弹出div配景层 function ZhenBi() { var ZheBiDIV = document.createElement("div"); ZheBiDIV.setAttribute("id","tccbg"); ZheBiDIV.style.position = "absolute"; ZheBiDIV.style.border = "none"; ZheBiDIV.style.top = "0px"; ZheBiDIV.style.background = ZhenBiColor; ZheBiDIV.style.zIndex = 99; ZheBiDIV.style.width=window.screen.width; ZheBiDIV.style.height = (document.body.scrollHeight > window.screen.height ? document.body.scrollHeight:window.screen.height)+50; ZheBiDIV.style.filter = "alpha(opacity="+TouMingDu+")"; document.body.appendChild(ZheBiDIV); } //弹出div事变层 function DIV() { var DIV = document.createElement("div"); DIV.setAttribute("id","wxjtcc"); DIV.style.position = "absolute"; DIV.style.border = "none"; DIV.style.background = DIVColor; DIV.style.zIndex = 99; DIV.style.top = document.documentElement.scrollTop+window.screen.height/2-100; DIV.style.left = window.screen.width/2; document.body.appendChild(DIV); DIV.style.width="50"; DIV.style.height = "50"; } //慢慢扩展div的宽和高 function JiaZhaiDiv() { var obj=document.getElementById("wxjtcc"); var width=document.getElementById("wxjtcc").offsetWidth; var height = document.getElementById("wxjtcc").offsetHeight; var left=document.getElementById("wxjtcc").offsetLeft; var top = document.getElementById("wxjtcc").offsetTop; var objDiv = document.getElementById("wxjtcc").offsetHeight; ; obj.style.left=left-2.5; obj.style.top=top-addHeight/addWidth*5/2; obj.style.width=(width+5); obj.style.height=(height+addHeight/addWidth*5); if(width<addWidth) { setTimeout("JiaZhaiDiv()",SuDu); } else{ //加载潜匿的div var obj=document.getElementById(addObj); obj.style.height=height; obj.style.width = width; obj.style.position = "absolute"; obj.style.top = top-5; obj.style.left = left-5; obj.style.zIndex = 100; obj.style.display = ""; } } function Close() { var obj=document.getElementById("wxjtcc"); var obj2=document.getElementById(addObj); if(obj2.style.display=="") { obj2.style.display="none"; } var width=document.getElementById("wxjtcc").offsetWidth; var height = document.getElementById("wxjtcc").offsetHeight; var left=document.getElementById("wxjtcc").offsetLeft; var top = document.getElementById("wxjtcc").offsetTop; var objDiv = document.getElementById("wxjtcc").offsetHeight; obj.style.left=left+2.5; obj.style.top=top+addHeight/addWidth*5/2; obj.style.width=(width-5); obj.style.height=(height-addHeight/addWidth*5); if(width<=10) { var obj2 = document.getElementById("wxjtcc"); var obj3 = document.getElementById("tccbg"); obj2.style.display = "none"; obj2.parentNode.removeChild(obj2); obj3.style.display = "none"; obj3.parentNode.removeChild(obj3); return; } else { var h =setTimeout("Close()",SuDu); } if(width!=500){ var obj=document.getElementById(addObj); obj.style.display = "none"; } } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="aaa" style="display:none"> <img src="http://www.veryhuo.com/uploads/common/images/close7.gif" style="cursor: hand;" onclick="Close()";/> </div> <input id="Button3" type="button" onclick="ChuangJianDIV('aaa','400','300','','','#0fffff','');" value="button" /> </div> </form> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!