当页弹出对话框的实现

 

用处

1，弹出对话框；2，如果是Gif图片的话还可以用作显示Loading状态；3，Tooltips，就是内容弹出提醒

Html代码，思路是一个背景层加一个内容层

<div id="modalBg"></div>
<div id="modalContent">这里是你的自定义弹出内容</div>

CSS代码

#modalBg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=50);
display: none;
z-index: 10000;
}

#modalContent {
position: absolute;
width: 353px;
height: 141px;
top: 50%;
margin-top: -80px;
left: 50%;
margin-left: -186px;
padding: 10px;
display: none;
z-index: 10001;
text-align: center;
background-color: white;
border: 1px solid white;
border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
-o-border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;
}

JS/JQ代码，自动定义显示与隐藏