本文使用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>
