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程序设计有所帮助。
-
本文向大家介绍JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码，包括了JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码的使用技巧和注意事项，需要的朋友参考一下 1.首先写一个遮罩层div，然后再写一个弹窗的div js代码：（把jq引进来） 效果： 总结 以上所述是小编给大家介绍的JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码，希望对大家有所帮助，如果大家有任何疑问
-
本文向大家介绍Android实现为ListView同时设置点击时的背景和点击松手之后的背景，包括了Android实现为ListView同时设置点击时的背景和点击松手之后的背景的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android实现为ListView同时设置点击时的背景和点击松手之后的背景。分享给大家供大家参考。具体分析如下： 这里要达到的效果是， （1）点击ListView的it
-
本文向大家介绍js实现仿Discuz文本框弹出层效果，包括了js实现仿Discuz文本框弹出层效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现仿Discuz文本框弹出层效果。分享给大家供大家参考。具体如下： 这是一个在经典论坛曾经热讨论的问题，记得在QQ邮箱里也有类似功能，Discuz7.0论坛里同样也有，当你的鼠标单击文本框的时候，会弹出一个包含文字、图片、表单无素的DIV层
-
本文向大家介绍js实现点击图片改变页面背景图的方法，包括了js实现点击图片改变页面背景图的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现点击图片改变页面背景图的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例，包括了jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接上代码吧 效果截图： 以上这篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大
-
本文向大家介绍vue组件实现弹出框点击显示隐藏效果，包括了vue组件实现弹出框点击显示隐藏效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码，供大家参考，具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的，所以在一开始是隐藏的，这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候，操作执行完后当前页面