js实现弹出窗口背景变暗弹出对话框特效-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js实现弹出窗口背景变暗弹出对话框特效

阅读：3650 输入：2016-08-17 09:14:14

<html>
<head>

<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>点击弹出窗口层并且背景变暗渐变</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript">
function showDetail() {
//背景
  var bgObj=document.getElementById("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
  bgObj.style.height = screen.height + "px";
//定义窗口
  var msgObj=document.getElementById("msgDiv");
  msgObj.style.marginTop = -75 +  document.documentElement.scrollTop + "px";
//关闭
  document.getElementById("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
  msgDetail.innerHTML="<p align=center>小窗口里的内容</p>"
}
</script>
</head>
<body>
<div id="msgDiv">
	<div id="msgShut">
		关闭</div>
	<div id="msgDetail">
	</div>
</div>
<div id="bgDiv">
</div>
<p>　</p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
</body>
</html>

上一篇：文本输入框添加gif动画、图片的代码
下一篇：淡黄色风格js日历代码

相关阅读: 纯js点击按钮调节网页缩放代码代码; js实现图片左右滑动展示特效; 纯js标题栏文字滚动特效