JavaScript实现弹出层显示、隐藏及拖拽功能示例

 
<!--弹出层的显示与隐藏-->
<script type="text/javascript">
//弹出层的显示
//overlays:为遮罩层的ID
//wins:弹出层窗体的ID
//弹出层中用于拖动的ID
function popDIV_show(overlays,wins,wins_title) {
var oLays = document.getElementById(overlays);
var oWins = document.getElementById(wins);
var oWins_title = document.getElementById(wins_title);
var bDrag = false;
var disX = disY = 0;
var w = "";
var n = 1;
if (n > 0) {
oLays.style.display = "block";
oWins.style.display = "block";
oWins_title.onmousedown = function(event) {
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWins.offsetLeft;
disY = event.clientY - oWins.offsetTop;
this.setCapture && this.setCapture();
return false
}; 
document.onmousemove = function(event) {
if (!bDrag)
return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth
- oWins.offsetWidth;
var maxT = document.documentElement.clientHeight
- oWins.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWins.style.marginTop = oWins.style.marginLeft = 0;
oWins.style.left = iL + "px";
oWins.style.top = iT + "px";
return false;
}; 
document.onmouseup = window.onblur = oWins_title.onlosecapture = function() {
bDrag = false;
oWins_title.releaseCapture && oWins_title.releaseCapture();
}; 
} 
} 
//弹出层的隐藏
//overlays:为遮罩层的ID
//wins:弹出层窗体的ID
function popDIV_hidden(overlays,wins) {
var oWins = document.getElementById(wins);
var oLays = document.getElementById(overlays);
oWins.style.display = "none";
oLays.style.display = "none";
} 
</script>