html 弹窗,可设置css,CSS实现覆盖弹窗（效果如JQuery-UI的Dialog）

原理：定义一个新的div用来覆盖整个页面，再把想要弹出的窗口放在这个div上面

1、定义一个div，设置其隐藏(display:none)，用于覆盖整个页面，并设置其CSS属性为：

#divBg

{

z-index: 99;

position: absolute;

width: 100%;

height: 100%;

background: #000;

-moz-opacity: 0.5;

opacity: 0.5;

filter: alpha(opacity=20);

}

2、设置要弹出的div的CSS属性为：

#divAdd

{

width: 300px;

height: 348px;

position: absolute;

background: #D6DFF7;

top: 100px;

left: 450px;

z-index: 100;

}

3、弹出窗口的事件：

function ShowAdd() {

if (document.getElementById("divAdd").style.display == "block") {

}

document.getElementById("divAdd").style.position = "absolute";

document.getElementById("divAdd").style.display = "block";

document.getElementById("divBg").style.display = "block";

}

4、关闭窗口的事件：

function CancelAdd() {

document.getElementById("divAdd").style.display = "none";

document.getElementById("divBg").style.display = "none";

}

原文：http://www.cnblogs.com/dongyu9521/p/3622938.html