js：
var mainDiv;
var bgDiv;
function popD(mainId, titleId, w, h) {
mainDiv = document.getElementById(mainId);
var bw = document.body.scrollWidth;
var bh = document.body.scrollHeight;
var ch = document.body.clientHeight;
var top = document.body.scrollTop;
bh = bh < ch ? ch : bh;
bgDiv = document.createElement("div");
document.body.appendChild(bgDiv);
bgDiv.style.width = bw + "px";
bgDiv.style.height = bh + "px";
bgDiv.style.opacity = "0.5";
bgDiv.style.backgroundColor = "#D1EEEE";
bgDiv.style.position = "absolute";
bgDiv.style.left = "0";
bgDiv.style.top = "0";
bgDiv.style.zIndex = "98";
mainDiv.style.display = "";
mainDiv.style.backgroundColor = "green";
mainDiv.style.width = w + "px";
mainDiv.style.height = h + "px";
mainDiv.style.position = "absolute";
mainDiv.style.zIndex = "99";
mainDiv.style.left = (bw - w) / 2 + "px";
mainDiv.style.top = top + (ch - h) / 2 + "px";
mainDiv.style.display = "";
var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
var moveable = false;
var tDiv = document.getElementById(titleId);
tDiv.onmousedown = function () {
tDiv.style.cursor = "move";
if (event.button == 1) {
tDiv.setCapture();
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(mainDiv.offsetLeft);
y1 = parseInt(mainDiv.offsetTop);
moveable = true;
}
};
tDiv.onmouseup = function () {
if (moveable) {
tDiv.releaseCapture();
moveable = false;
}
};
tDiv.onmousemove = function () {
if (moveable) {
var x = x1 + event.clientX - x0;
var y = y1 + event.clientY - y0;
if (x + w < bw && x > 0) {
mainDiv.style.left = x;
}
if (y + h < bh && y > 0) {
mainDiv.style.top = y;
}
}
};
}
function closeD() {
bgDiv.style.display = "none";
mainDiv.style.display = "none";
}
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="popD.js"></script>
</HEAD>
<BODY>
最底层内容
<div id="main" style="display:none;">
<div id="title" style="width:100%;background-color:red;">title</div>
弹出层<input type="button" value="隐藏" id="hid" onclick="closeD();">
</div>
最底层内容
<input type="button" value="显示" id="show" onclick="popD('main','title',300,200);">
</BODY>
</HTML>