当页弹出对话框的实现

 

用处

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代码，自动定义显示与隐藏