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

前端技术 2023/09/09 JavaScript

本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果。分享给大家供大家参考。具体如下：

这里仿网易点击弹出提示，背景变暗提示层效果，圆角，美观简洁，代码稍嫌多。

运行效果如下图所示：

在线演示地址如下：

http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24499

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案