代碼“用DIV模擬模式窗口.html”：
<html>
<style type="text/css">
<!--
._syslayerTitle {
background-color: #0099CC;
background:#bcd5f0 url("bar_bg.gif") repeat-x top left;
height:22px;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
text-align:right;
cursor:move;
}
._syslayerContent {
background-color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
document.onmousedown = mouseDown;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
_syslayerTitleTemplate = "<div id=\"_syslayerTitle\" class=\"_syslayerTitle\" moveAble=\"true\">dddddd<a href=\"#\" onclick=\"hideWinLay();\">[關(guān)閉]</a></div><div id=\"_syslayerContent\" class=\"_syslayerContent\">{$content}</div>";
function openWinLayer(innerHTMLCode, w, h) { //動態(tài)創(chuàng)建一個window層
//使用一個背景層
_underlay();
var node = document.getElementById("_syslayer");
if (!node) {
node=document.createElement("div");
node.setAttribute("id", "_syslayer");
node.style.visibility="hidden";
node.style.top = "-9999px";
node.style.position = "absolute";
node.style.border = "1px";
node.style.borderColor = "Green";
node.style.borderStyle = "solid";
node.innerHTML = _syslayerTitleTemplate.replace("{$content}", innerHTMLCode);
document.body.appendChild(node);
}
if (w) {
node.style.width = w + "px";
}
if (h) {
node.style.height = h + "px";
}
node.style.top = Math.floor(document.body.scrollTop+(document.body.clientHeight-node.offsetHeight)/2)+"px";
node.style.left = Math.floor(document.body.scrollLeft+(document.body.clientWidth-node.offsetWidth)/2)+"px";
node.style.visibility="visible";
node.style.zIndex = 999;
}
function hideWinLay() { //隱藏window層, 系統(tǒng)僅此一個, 不銷毀
var layerNode = document.getElementById("_syslayer");
var underLayerNode = document.getElementById("_sysUnderlayer");
if (layerNode) {
layerNode.style.visibility="hidden";
layerNode.style.top = "-9999px";
}
if (underLayerNode) {
underLayerNode.style.visibility="hidden";
underLayerNode.style.top = "-9999px";
_autoShowSelectComp();
}
}
function _underlay() { //動態(tài)創(chuàng)建一個背景層, 內(nèi)部使用
_autoHideSelectComp();
var node = document.getElementById("_sysUnderlayer");
if (!node) {
node=document.createElement("div");
node.setAttribute("id", "_sysUnderlayer");
node.style.visibility="hidden";
node.style.height = document.body.clientHeight + "px";
node.style.width = document.body.clientWidth -20 + "px";
node.style.background = "#eee";
node.style.opacity = "0.5";
node.style.filter= "alpha(opacity=60)";
node.style.position = "absolute";
node.style.top = "-9999px";
document.body.appendChild(node);
}
node.style.top = "0px";
node.style.left = "0px";
node.style.visibility="visible";
node.style.zIndex = 1;
}
function _autoHideSelectComp() { //隱藏select控件
var comps = document.body.getElementsByTagName("SELECT");
for (var i=0; i<comps.length; i++){
if (comps[i].style.display != "none") {
comps[i].setAttribute("hideAuto", "hideAuto");
comps[i].style.display = "none";
}
}
}
function _autoShowSelectComp() { //顯示剛才隱藏的select控件
var comps = document.body.getElementsByTagName("SELECT");
for (var i=0; i<comps.length; i++){
if (comps[i].getAttribute("hideAuto")) {
comps[i].removeAttribute("hideAuto");
comps[i].style.display = "";
}
}
}
var target;
var beginPosX;
var beginPosY;
function mouseMove(ev) {
ev = ev || window.event;
//var target = ev.target || ev.srcElement;
if(target) {
if(target.getAttribute("moveAble") == "true") {
var curTarget = target.parentNode;
curTarget.style.left = document.body.scrollLeft + ev.clientX - beginPosX;
curTarget.style.top = document.body.scrollTop + ev.clientY - beginPosY;
document.all.x.value = document.body.scrollLeft +":"+ev.clientX+":"+beginPosX+"--"+curTarget.style.left;
document.all.y.value = document.body.scrollTop +":"+ev.clientY+":"+beginPosY+"--"+curTarget.style.top;
}
}
}
function mouseDown(ev) {
ev = ev || window.event;
target = ev.target || ev.srcElement;
if(target.getAttribute("moveAble")) {
target.setAttribute("moveAble", "true");
}
beginPosX = ev.layerX || ev.offsetX;
beginPosY = ev.layerY || ev.offsetY;
}
function mouseUp(ev) {
ev = ev || window.event;
target = ev.target || ev.srcElement;
if(target.getAttribute("moveAble")) {
target.setAttribute("moveAble", "false");
}
}
function testCharngeCSS() {
with(document.getElementById("_syslayerTitle").style) {
backgroundColor = "#FF99CC";
cursor = "move";
}
}
</script>
<body>
<div align="center">
<button onClick="openWinLayer('<div align=center><button onclick=testCharngeCSS();>測試IE6的CSS是否只能這樣加載</button><button onclick=hideWinLay()>關(guān)閉</button></div>', 300, 400)">打開層</button>
X: <input type="text" name="x" value="" />
Y: <input type="text" name="y" value="" />
<br>
測試下拉框有沒有被擋住<select name="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
這里有個隱藏的select組件，恢復(fù)后是否也是隱藏的？<select name="sel" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</body>
</html>
更簡單的例子請看：用DIV模仿Windows關(guān)機的效果
