详解用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>