点击弹出遮罩层，JavaScript弹出可封锁的对话框

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

导读：一种带渐变的点击弹出遮罩层， Java Script弹出可封锁的对话框，可以配置弹出窗口的宽度、高度、边框颜色、问题颜色、问题高度、赏识器事变地区内页面宽度、界说div属性等，配景层(巨细与窗口有用地区沟通，即当弹出对话框时，配景表现为放射状透明灰色)，

　　一种带渐变的点击弹出遮罩层，JavaScript弹出可封锁的对话框，可以配置弹出窗口的宽度、高度、边框颜色、问题颜色、问题高度、赏识器事变地区内页面宽度、界说div属性等，配景层(巨细与窗口有用地区沟通，即当弹出对话框时，配景表现为放射状透明灰色)，代码内的注释很是完备，很得当进修JS技能。

　　示例：

<html> <head> <title>JS弹出框，JS弹出层</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> *{margin:0;padding:0;} </style> </head> <body> <p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p><p>猛火网-网页殊效</p> <input type="button" value="点击这里" onClick="sAlert('猛火网-网页殊效结果<br/>嗯！结果还不错！');" /> <script type="text/javascript" language="javascript"> function sAlert(str){ var msgw,msgh,bordercolor; msgw=400;//提醒窗口的宽度 msgh=100;//提醒窗口的高度 titleheight=25 //提醒窗口问题高度 bordercolor="#336699";//提醒窗口的边框颜色 titlecolor="#99CCFF";//提醒窗口的问题颜色 var sWidth,sHeight; sWidth=document.body.offsetWidth;//赏识器事变地区内页面宽度 sHeight=screen.height;//屏幕高度（垂直<b>判别率</b>） //配景层（巨细与窗口有用地区沟通，即当弹出对话框时，配景表现为放射状透明灰色） var bgObj=document.createElement("div");//建设一个div工具（配景层） //界说div属性，即相等于 //<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div> bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#777"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj);//在body内添加该div工具 var msgObj=document.createElement("div")//建设一个div工具（提醒框层） //界说div属性，即相等于 //<div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></div> msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.background="white"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.top = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="25px"; msgObj.style.zIndex = "10001"; var title=document.createElement("h4");//建设一个h4工具（提醒框问题栏） //界说h4的属性，即相等于 //<h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick="">封锁</h4> title.setAttribute("id","msgTitle"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="3px"; title.style.background=bordercolor; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity="0.75"; title.style.border="1px solid " + bordercolor; title.style.height="18px"; title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="white"; title.style.cursor="pointer"; title.innerHTML="封锁"; title.onclick=removeObj; var button=document.createElement("input");//建设一个input工具（提醒框按钮） //界说input的属性，即相等于 //<input type="button" align="center" style="width:100px; align:center; margin-left:250px; margin-bottom:10px;" value="封锁"> button.setAttribute("type","button"); button.setAttribute("value","封锁"); button.style.width="60px"; button.style.align="center"; button.style.marginLeft="250px"; button.style.marginBottom="10px"; button.style.background=bordercolor; button.style.border="1px solid "+ bordercolor; button.style.color="white"; button.onclick=removeObj; function removeObj(){//点击问题栏触发的变乱 document.body.removeChild(bgObj);//删除配景层Div document.getElementById("msgDiv").removeChild(title);//删除提醒框的问题栏 document.body.removeChild(msgObj);//删除提醒框层 } document.body.appendChild(msgObj);//在body内添加提醒框div工具msgObj document.getElementById("msgDiv").appendChild(title);//在提醒框div中添加问题栏工具title var txt=document.createElement("p");//建设一个p工具（提醒框提醒信息） //界说p的属性，即相等于 //<p style="margin:1em 0;" id="msgTxt">猛火网-网页殊效结果</p> txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); txt.innerHTML=str;//来历于函数挪用时的参数值 document.getElementById("msgDiv").appendChild(txt);//在提醒框div中添加提醒信息工具txt document.getElementById("msgDiv").appendChild(button);//在提醒框div中添加按钮工具button } </script> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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