首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-08-25 
详解用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>





热点排行