画页面过程中总后许多弹出框（例如alert，confirm，dialog）的需求，单浏览器自身的alert，confirm，dialog比较难看。一般那我都是自己用div写一个模拟弹出框，但是这里有一个大问题：模拟弹出框显示后，页面的其他部分还能点击操作。这容易造成误操作，我想要的效果是模拟弹出框显示后页面的其他部分都不能操作。最后我找到一种写遮盖层的方法。
主要原理是利用页面主内容、遮盖层和弹出框z-index的大小进行控制。形象的说这三个部分就像三张纸，弹出框在最上面，遮盖层在中间，页面主内容在最下面。这样的话模拟弹出框显示后页面的其他部分都不能操作。代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出模态对话框测试[IE6下测试通过]</title> <style type="text/css"> .hideDlg { height:129px;width:368px; display:none; } .showDlg { background-color:#ffffdd; border-width:3px; border-style:solid; height:129px;width:368px; position: absolute; display:block; z-index:5; } .showDeck { display:block; top:0px; left:0px; margin:0px; padding:0px; width:100%; height:100%; position:absolute; z-index:3; background:#cccccc; } .hideDeck { display:none; } </style> <script type="text/javascript"> function showDlg() { //显示遮盖的层 var objDeck = document.getElementById("deck"); if (!objDeck) { objDeck = document.createElement("div"); objDeck.id = "deck"; document.body.appendChild(objDeck); } objDeck.className = "showDeck"; objDeck.style.filter = "alpha(opacity=50)"; objDeck.style.opacity = 40 / 100; objDeck.style.MozOpacity = 40 / 100; //显示遮盖的层end //禁用select hideOrShowSelect(true); //改变样式 document.getElementById('divBox').className = 'showDlg'; //调整位置至居中 adjustLocation(); } function cancel() { document.getElementById('divBox').className = 'hideDlg'; document.getElementById("deck").className = "hideDeck"; hideOrShowSelect(false); } function hideOrShowSelect(v) { var allselect = document.getElementsByTagName("select"); for (var i = 0; i < allselect.length; i++) { //allselect[i].style.visibility = (v==true)?"hidden":"visible"; allselect[i].disabled = (v == true) ? "disabled" : ""; } } function adjustLocation() { var obox = document.getElementById('divBox'); if (obox != null && obox.style.display != "none") { var w = 368; var h = 129; var oLeft, oTop; if (window.innerWidth) { oLeft = window.pageXOffset + (window.innerWidth - w) / 2 + "px"; oTop = window.pageYOffset + (window.innerHeight - h) / 2 + "px"; } else { var dde = document.documentElement; oLeft = dde.scrollLeft + (dde.offsetWidth - w) / 2 + "px"; oTop = dde.scrollTop + (dde.offsetHeight - h) / 2 + "px"; } obox.style.left = oLeft; obox.style.top = oTop; } } </script> </head> <body onresize="adjustLocation();"> <input type="button" value="click me" onclick="showDlg();" size="10px" /><br/> <input type="text" value="" size="10px" /><a href="http://www.baidu.com" target="_blank">百度</a><br/> <select> <option selected="selected">1</option> <option>2</option> </select><br/> <div id="divBox" class="hideDlg" style="" > <table width="100%" style="height:100%; 100%;" id="table1"> <tr> <td style="height: 20px; text-align: center;" colspan="3">请输入用户名及密码</td> </tr> <tr> <td>用户名</td> <td> <input name="TextBox1" type="text" id="TextBox1" /> </td> <td></td> </tr> <tr> <td>密码</td> <td> <input name="TextBox2" type="text" id="TextBox2" /></td> <td></td> </tr> <tr> <td></td> <td> <input type="button" name="Button1" value="Login" id="Button1" size="10" onclick="alert(TextBox1.value)"/> <input type="button" name="Button2" value="Cancel" id="Button2" size="10" onclick="cancel();" /> </td> <td> </td> </tr> </table> </div> </body> </html>
这里我还想说个问题：.showDeck {height:100%;}
我一直以为body的子元素div属性height:100%;是包含了滚动条下面的内容，结果事实告诉我height:100%;只是浏览器窗口的高度。