JavaScript动态弹出层，点击缓缓关闭效果

发布时间：2018-08-18 23:42:37 所属栏目：聚会来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：通化站长网）

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