本文使用div的形式来模拟模态对话框。
实现原理：是通过在最上层增加一个全屏的div，然后设置改div的透明度和背景颜色，最后在div上在加一个div用于模拟对话框的形式即可实现。
详细代码及说明如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三生草</title>
<style>
html,body{height:100%;}
<!-- 下面这个center是实现最外层模拟对话框的那个div。其中z-index设置改div所在的层数。可保证该div在最上层出现。-->
.center{
position:absolute;
left:50%;
top:30px;
width:300px;
margin-top:50px;
margin-left:-116px;
border:2px solid #000;
background-color:#ccf;
z-index:200;
text-align:center;
}
<!-- 下面这个grayout是实现倒数第二层的那个透明屏障，它的透明度为80%，铺满了整个屏幕。它的z-index比上面的那个div小，比其他的大。-->
.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;
font-size:70pt;
background-color:#999;
text-align:center;
}
</style>
<script>
function ss()
{
/*点击“open dialogButton”用于实现上面的那两个div的显示，从而实现了模拟模态对话框的效果。*/
document.getElementById("sst").style.display="block";
document.getElementById("ssr").style.display="block";
}
function removeDialog()
{
/*点击“close”用于实现上面的那两个div的隐藏。从而关闭模态对话框的形态*/
document.getElementById("sst").style.display="none";
document.getElementById("ssr").style.display="none";
}
</script>
</head>
<body>
<br/>
<center>
<h3>This is Html5</h3>
<input type="button" id="dialogButton" value="open dialogButton" οnclick="ss()">
<div class="grayout" style="display:none" id="sst">
</div>
<div style="align:center;display:none" class="center" id="ssr">
<h1 style='align:center;border-bottom:1px solid black;'>close</h1>
<div style='align:center;background:white'>
<form>
<br><input type='button' value='close' οnclick='removeDialog();'>
</form>
</div>
</div>
</center>
</body>
</html>
