js实现仿网易点击弹出提示同时背景变暗效果

本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果。分享给大家供大家参考。具体如下：
这里仿网易点击弹出提示，背景变暗提示层效果，圆角，美观简洁，代码稍嫌多。
运行效果如下图所示：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/
具体代码如下：

<html><head><title>点击弹出提示，背景变暗</title><script>function msg（info）{var p=document.createElement（"DIV"）;if （！info） var info="<a href="#" target="_blank" rel="external">欢迎光临</a>";p.id="p";p.style.position="absolute";p.style.width=document.body.scrollWidth;p.style.height=（document.body.offsetHeight>document.body.scrollHeight）?"100%":document.body.scrollHeight;p.style.zIndex="998";p.style.top="0px"; p.style.left="0%";p.style.backgroundColor="gray";p.style.opacity="0.5";p.style.filter="alpha（opacity=80）";document.body.appendChild（p）;var p1=document.createElement（"DIV"）;var top=parseInt（parseInt（document.body.scrollHeight）*0.25）+document.body.scrollTop;p1.style.position="absolute";p1.style.width="300px";p1.id="p1";var left=Math.ceil（（（document.body.scrollWidth）-parseInt（p1.style.width.replace（"px",""）））/2）+document.body.scrollLeft;p1.style.height="200px";p1.style.zIndex="999";p1.style.top=top+"px"; p1.style.left=left+"px";p1.style.border="0px solid red";var html=""; html+="<center>" html+="<div class="p3" style="height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red;"></div>" html+="<div class="p2" style="height:1px;overflow:hidden;background:red;width:296px;border-left:1px solid red;border-right:1px solid red;"></div>" html+="<div class="p2" style="height:1px;overflow:hidden;background:red;width:298px;border-left:1px solid red;border-right:1px solid red;"></div>" html+="<div class="p1" style="height:20px;overflow:hidden;background:red;width:300px;border-left:1px solid red;border-right:1px solid red;color:#fff;font-size:9pt;font-weight:bold;text-align:left;"> ⊙ 友情提示：</div>"html+="<div id="c" style="height:150px;width:300px;background-color:#FEEACB;overflow:hidden;border-left:1px solid red;border-right:1px solid red;padding-top:40px;font-size:9pt;">"+info+"<br><br><br>[ <a href="javascript:this.cancle（）"> 关闭</a> ]</div>" html+="<div class="p1" style="height:1px;overflow:hidden;background:#FEEACB;width:298px;border-left:1px solid red;border-right:1px solid red;"></div>" html+="<div class="p2" style="height:1px;overflow:hidden;background:#FEEACB;width:296px;border-left:1px solid red;border-right:1px solid red;"></div>" html+="<div class="p3" style="height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red"></div>" html+="</center>"document.body.appendChild（p1）;p1.innerHTML=html;var arr=document.getElementsByTagName（"select"）;var i=0;while（i<arr.length）{ arr[i].style.visibility="hidden"; i++;}this.cancle=function（）{document.body.removeChild（document.getElementById（"p"））;document.body.removeChild（document.getElementById（"p1"））;var arr=document.getElementsByTagName（"select"）; var i=0; while（i<arr.length）{ arr[i].style.visibility="visible"; i++; }}}</script></head><body><input value="点击弹出提示" type="button" onClick="msg（）" /></body></html>

希望本文所述对大家的javascript程序设计有所帮助。