详解用CSS来实现网页模式对话框效果用CSS来控制DIV的属性，辅以JavaScript响应事件，就可以实现类于桌面UI
详解用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>