模态对话框作为日常交互中最常见的一种形式，官方也提供了基本的模态对话框效果，那么是不是有必要再造个轮子呢，
我觉得是很有必要的
因为官方提供的模态对话框非常弱，存在很多限制，今天实现了一个模态对话框效果，具体代码参考了博客园的一篇文章
基本的方法是，通过设置 z-index，用一个占满全部显示区域的覆盖层 DIV 放在主要内容前面，再将模态窗口 DIV 放在覆盖层前面。为了让用户知道主窗口的内容暂时不可使用，可以对覆盖层 DIV 设置半透明的灰色背景。
1
<!DOCTYPE html>
<html><head>
<style type='text/css'>
#overlay {
visibility: visible; /*hidden;*/
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
background: gray;
zoom: 1;
filter: alpha(opacity=80);
opacity: 0.8;
}
#container {
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 2000;
text-align: center;
}
#dialog {
width: 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>
1
overlay 和 container 这两个 DIV 也可以合并成一个，但由于透明元素的继承性，只能使用半透明的 PNG 图片作为背景了。
