CSS遮罩层对话框

CSS遮罩层对话框简单实现

0.前期准备工作

jquery 1.8支持
HTML
CSS

1.创建一个在浏览器顶层的“遮罩层”

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

.mask {
z-index:98;
background-color: #000;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom:0;
filter:alpha(opacity=80);  /*支持 IE 浏览器*/
-moz-opacity:0.80; /*支持 FireFox 浏览器*/
opacity:0.80;  /*支持 Chrome, Opera, Safari 等浏览器*/
}

要保证遮罩层在浏览器顶层，z-index设置比较高的值(一般最顶层还要显示一个信息对话框什么的)，现在考虑如何让它铺满整个页面。

设置left、top、right、bottom都为0，这样就保证遮罩层铺满当前页面；

设置position为fixed保证浏览器滚动条滚动后仍保持遮蔽效果；

设置调整filter、-moz-opacity和opacity透明度兼容性，保证遮罩效果。

2.创建一个信息对话框

<div id="dialog" class="modal">
<div class="modal-header">
<div class="close">x</div>
test header
</div>
<div class="modal-body">
test body
</div>
<div class="modal-footer">
<button>确认</button>
<button>关闭</button>
</div>
</div>

.modal {
z-index: 99;
position: fixed;
background-color: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 3px 3px #888;
-webkit-box-shadow: 0 0 3px 3px#888;
box-shadow: 0 0 3px 3px #888;
}
.modal-header {
z-index: 99;
padding: 9px 15px;
border-bottom: 1px solid #eee;

}

.modal-body{
padding: 9px 15px;

}

.modal-footer{
text-align: right;
border-top: 1px solid #eee;
}

.close{
cursor: pointer;
float: right;
font-size: 20px;
line-height: 20px;
color: #ccc;
opacity: 0.80;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.close:hover{
color: #000;
}

保证dialog的z-index在mask上面，样式可以自己调整，阴影和圆角看个人喜欢。

3.jquery显示控制

$(function () {

$('#mask').click(function(){
hideMask();
});

$('#dialog .close').click(function(){
hideMask();
});

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
$('#dialog').css("left",(windowWidth-$('#dialog').width())/2);
$('#dialog').css("top",(windowHeight-$('#dialog').height())/2);

});

/**
* 隐藏蒙版和对话框
*/
function hideMask(){
$('#dialog').fadeOut(900);
$('#mask').fadeOut(1000);
}

4.效果图