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

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

1. 基本原理

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

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

dialog:   白色 /  zindex = 101

 

<style type="text/css">#mask {float:left;width: 643px;z-index: 100;display: inline;position:absolute;left: 0;height: 300px;background-color: #CCCCCC;overflow: hidden;top: 0;opacity: 0.2;FILTER: alpha(opacity=20);visibility: visible;}#dialog{float:left;width: 200px;z-index: 101;display: inline;position:absolute;height: 150px;background-color: #FFFFCC;overflow: hidden;visibility: visible;left: 100px;}</style>

然后在网页中添加2个div

<div id="mask"></div><div id="dialog"></div> 

2. 弹出对话框

css的visibility用于控制其显示或者隐藏,  left, top用于控制其位置, width, height控制其大小(BOX模型)。显然，在通常状态下，把mask和dialog设置为hidden；在需要弹出效果时，把mask和dialog设置为visible即可实现前述的模式对话框效果。【注】其他属性如float, display也要做出正确设置，模仿例

<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>