CSS 生成的模态窗口

在 IE 和 Fireofx 浏览器中都可以用 window.showModalDialog 方法弹出一个模态窗口,在关闭该窗口之前,主窗口将不能操作。Chrome 虽然支持此方法,却只是将它当成普通的弹出窗口,没有禁止主窗口的操作。为了跨浏览器考虑,有必要用 DIV 和 CSS 生成模态窗口。

基本的方法是,通过设置 z-index,用一个占满全部显示区域的覆盖层 DIV 放在主要内容前面,再将模态窗口 DIV 放在覆盖层前面。为了让用户知道主窗口的内容暂时不可使用,可以对覆盖层 DIV 设置半透明的灰色背景。例如(查看效果):

<!DOCTYPE html>

<html><head>  

<style type='text/css'>

#overlay {

  visibility: visible; /*hidden;*/

  position: absolute;

  left: 0px;

  top: 0px;

  width:100%;

  height:100%;

  z-index: 1000;

  background: gray;

  zoom: 1;

  filter: alpha(opacity=80);

  opacity: 0.8;

}

#container {

  position: absolute;

  left: 0px;

  top: 0px;

  width:100%;

  height:100%;

  z-index: 2000;

  text-align: center;

}

#dialog {

  width: 480px;

  height: 300px;

  margin: 100px auto;

  border: 1px solid #000;

  padding: 15px;

  text-align: center;

  background: white;

}

</style>

</head><body>

<div id="main">Main Content</div>

<div id="overlay"></div>

<div id="container">

    <div id="dialog">Hello Modal Dialog!</div>

</div>

</body></html>

overlay 和 container 这两个 DIV 也可以合并成一个,但由于透明元素的继承性,只能使用半透明的 PNG 图片作为背景了。

参考资料:
[1] showModalDialog method - MSDN
[2] showModelessDialog method - MSDN
[3] window.showModalDialog - MDN
[4] 浏览器对模态对话框和非模态对话框的支持 - W3Help
[5] CSS3 opacity property - w3schools
[6] CSS实现HTML元素透明的那些事
[7] CSS2 - opacity - quirksmode.org
[8] CSS Transparency Settings for All Browsers
[9] Create a Modal Dialog Using CSS and Javascript
[A] CSS 背景 - w3school
[B] Modal Dialog Box
[C] sublog : Cross Browser DHTML Modal Dialogs For Web Apps
[D] Top 8 modal dialogs javascript | Witty Sparks
[E] 一个关于透明度继承的问题
[F] 取消透明度继承的方法

你可能感兴趣的:(css)