在 IE 和 Fireofx 浏览器中都可以用 window.showModalDialog 方法弹出一个模态窗口，在关闭该窗口之前，主窗口将不能操作。Chrome 虽然支持此方法，却只是将它当成普通的弹出窗口，没有禁止主窗口的操作。为了跨浏览器考虑，有必要用 DIV 和 CSS 生成模态窗口。
基本的方法是，通过设置 z-index，用一个占满全部显示区域的覆盖层 DIV 放在主要内容前面，再将模态窗口 DIV 放在覆盖层前面。为了让用户知道主窗口的内容暂时不可使用，可以对覆盖层 DIV 设置半透明的灰色背景。例如（查看效果）：
<!DOCTYPE html>
<html><head>
<style type='text/css'>
#overlay {
visibility: visible; /*hidden;*/
position: absolute;
left: 0px;
top: 0px;
100%;
height:100%;
z-index: 1000;
background: gray;
zoom: 1;
filter: alpha(opacity=80);
opacity: 0.8;
}
#container {
position: absolute;
left: 0px;
top: 0px;
100%;
height:100%;
z-index: 2000;
text-align: center;
}
#dialog {
480px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
padding: 15px;
text-align: center;
background: white;
}
</style>
</head><body>
<div id="main">Main Content</div>
<div id="overlay"></div>
<div id="container">
<div id="dialog">Hello Modal Dialog!</div>
</div>
</body></html>
overlay 和 container 这两个 DIV 也可以合并成一个，但由于透明元素的继承性，只能使用半透明的 PNG 图片作为背景了。
参考资料：
[1] showModalDialog method - MSDN
[2] showModelessDialog method - MSDN
[3] window.showModalDialog - MDN
[4] 浏览器对模态对话框和非模态对话框的支持 - W3Help
[5] CSS3 opacity property - w3schools
[6] CSS实现HTML元素透明的那些事
[7] CSS2 - opacity - quirksmode.org
[8] CSS Transparency Settings for All Browsers
[9] Create a Modal Dialog Using CSS and Javascript
[A] CSS 背景 - w3school
[B] Modal Dialog Box
[C] sublog : Cross Browser DHTML Modal Dialogs For Web Apps
[D] Top 8 modal dialogs javascript | Witty Sparks
[E] 一个关于透明度继承的问题
[F] 取消透明度继承的方法