javascript弹出DIV层并锁屏
1 <html> 2 <head> 3 <title>javascript弹出DIV层并锁屏</title> 4 <style> 5 .black_overlay 6 { 7 display: none; 8 position: absolute; 9 top: 0%; 10 left: 0%; 11 100%; 12 height: 100%; 13 background-color: black; 14 z-index: 1001; 15 -moz-opacity: 0.8; 16 opacity: 0.5; 17 filter: alpha(opacity=80); 18 } 19 20 .white_content 21 { 22 display: none; 23 position: absolute; 24 top: 25%; 25 left: 25%; 26 50%; 27 height: 50%; 28 padding: 16px; 29 border: 16px solid orange; 30 background-color: white; 31 z-index: 1002; 32 overflow: auto; 33 } 34 </style> 35 </head> 36 <body> 37 <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">打开</a> 38 <div id="light" class="white_content">内容<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div> 39 <div id="fade" class="black_overlay"> 40 </div> 41 </body> 42 </html>
思路：
2个div 默认隐藏 点击的时候 显示，其中一个div利用css效果(width：100% height：100% 结合z_index 注意内容的z_index的值大于背后隐藏的idv的z_index
关闭 则隐藏)。
jq版本
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>半透明背景层</title>
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function () {
var station = false,
info = $(".info"),
backgroundDiv = $(".backgroundDiv");
$("#show").click(function () {
if (station == false) {
backgroundDiv.css({ "opacity": "0.5" }).fadeIn('normal');
var scrollWidth = document.documentElement.clientWidth,
scrollHeight = document.documentElement.clientHeight,
divWidth = info.width(),
divHeight = info.height(),
divLeft = scrollWidth / 2 - divWidth / 2,
divTop = scrollHeight / 2 - divHeight / 2;
info.css({ "position": "absolute", "top": divTop, "left": divLeft }).fadeIn('normal');
station = true;
} else {
alert("状态错误！");
}
});
$("#close").click(function () {
if (station == true) {
info.fadeOut('normal');
backgroundDiv.fadeOut('normal');
station = false;
}
});
});
</script>
<style type="text/css">
.backgroundDiv
{
100%;
height: 100%;
display: none;
z-index: 10;
background-color: #333333;
position: absolute;
top: 0px;
left: 0px;
}
.info
{
400px;
height: 300px;
background-color: #FFFFFF;
border: 5px solid #0066FF;
display: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 11;
}
#closeDiv
{
float: right;
22px;
height: 22px;
margin-top: 10px;
margin-right: 10px;
}
.close
{
float: right;
}
</style>
</head>
<body>
<center>
<img src="images/opacity.jpg" />
<div><button id="show">press me</button>
</div>
</center>
<div class="backgroundDiv"></div>
<div class="info">
<div id="closeDiv"><img id="close" src="images/close.jpg" width="22" /></div>
<img src="images/opacity.jpg" width="400px" />
</div>
</body>
</html>
原理同上。 jq代码 首先获取body的width 和height ，在获取弹出框的width 和height 用body的值减去弹出框的值 除2 就居中了。至于鼠标移动注意鼠标的事件顺序
首先 onmousedown(鼠标按下) onmousemove（鼠标拖动） onmouseup（鼠标松开） 最后控制移动的范围 总不能移动到屏幕的外面去吧 ！呵呵