上一节《教你做个在线html编辑器》中我们提到了用div模拟一个对话框，在一些较老的js代码中，我们可以看到有人使用window.showmodaldialog来弹出一个网页也就是模态对话框，然后我们可以获得参数，而在弹出模态对话框后，父窗体无法操作。
　　但只有ie支持window.showmodaldialog这个方法。谷歌、火狐等浏览器都不支持(听说曾经也支持过)。也说是在谷歌、火狐等浏览器中运行，什么也不会发生。所以你如果仔细观察发现，在现在的网页中除了alert警告对话框，几乎都是使用div+css来模拟对话框。现在我们也这样做——用div++css来模拟对话框。
　　我们知道在css中有一个z-index，当z-index的较大值会覆盖在较小值之上，这一来我们就可以我们就可以将需要在“对话框”中设置的控件放到div中，然后设置一个大一些的z-index值，但问题来了，div外的区域仍然可以操作，不能像window.showmodaldialog，使“对话框”以外的区域无法操作。该怎么办呢？我们可以再建一个div层，它的z-index值介于主要页面和div对话框两者之间，然后将它设为半透明。我们称它为阴影层，这样既能看到主要页面，主要页面也不能被操作到。阴影层的css如下：

.grayout{
position:absolute;
z-index:50;
top:0px;
left:0px;
width:100%;
height:100%;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.80;

background-color:#999;
text-align:center;
}
　　我们还要设置对话框div的css,代码如下：
.center_500{                       
position:absolute;
left:50%;
top:30px;
width:500px;
margin-top:50px;
margin-left:-250px;

background-color:#ccf;
z-index:200;
text-align:center;
}
　　注意其中width可以修改成你自己需要的宽度，margin-left是width的一半，取相反数。对了，请再补上这段
html,body
{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
　　接下去，我们可以使用js+css来控制对话框div和阴影层的display来使用两者出现或隐藏，以模拟打开和关闭功能。
　　在网页刚打开时，我们要将两者的display值设为none，也就是隐藏它们。html代码如下
<div class="grayout" style="display:none" id="divshadow">
</div>
<div style="display:none" class="center_500" id="divdia">
</div>
　　打开(显示)、关闭(隐藏)的代码分别如下。
function opendivdialog(shadowdivid, contentdivid)
{

contentdivid.style.display = "block";
shadowdivid.style.display = "block";
shadowdivid.style.height = document.body.scrollHeight + 5 + "px";


}

function closedivdialog(shadowdivid, contentdivid)
{

    contentdivid.style.display = "none";
    shadowdivid.style.display = "none";
}

　　最后调用两个函数(阴影层是shadowdivid的id值, contentdivid是div对话框的id值)。
　　这样，我们就实现了div+css+js来模拟对话框了。