详解用CSS来实现网页"模式对话框"效果

用CSS来控制DIV的属性，辅以JavaScript响应事件，就可以实现类似于桌面UI的对话框效果。

1. 基本原理

基本原理就是在网页里添加2个浮动的层，一个叫dialog，用于包含对话框的内容；另一个叫mask，用于模拟灰化。当mask层浮动时，位于mask层下的网页内容都不可以被选中。由于mask层是灰色、半透明的，所以mask层起到灰化背景、模式化的效果。

mask: 灰色 / 半透明 / zindex = 100 / 与屏幕同大小

dialog: 白色 / zindex = 101

<script>function showDialog(){document.getElementById("mask").style.visibility="visible";document.getElementById("dialog").style.visibility="visible";}function hideDialog(){document.getElementById("mask").style.visibility="hidden";document.getElementById("dialog").style.visibility="hidden";}</script>