html 弹窗之后页面变灰色,点击后画面弹框背景变灰阴影层

实现页面功能的时候经常会遇到一个小功能需求：点击画面一个按钮，画面弹出信息页面，同时背景变暗(背景变暗其实是有个灰色半透明的全屏div遮住了原来的页面)且不可操作，信息页面操作关闭后恢复正常。

先简要理一下实(shuo)现(ren)思(hua)路：

点击事件之后要呈现半透明灰色背景挡住原页面

灰色背景之上弹出对话框(或是信息页面)

对话框关闭按下之后，对话框消失

灰色背景消失

html、css方面：

信息页面得是绝对布局保证弹出位置固定(如果需要绝对居中则增加样式：top：50%；left：50%；margin-top：信息页面高度的一半；margin-left：信息页面宽度的一半)；

z-Index属性原页面、阴影层、信息页面依次递增(最大在最上面)；

display初始为none；

背景层div高、宽为100%，颜色、透明度酌情赋值；

js：

open(原页面按钮)：

document.getElementById(‘弹框id‘).style.display = "block";

document.getElementById(‘背景id‘).style.display = "block";

close(弹框关闭按钮)：

document.getElementById(‘弹框id‘).style.display = "none";

document.getElementById(‘背景id‘).style.display = "none";

原文：http://www.cnblogs.com/codingHeart/p/6636169.html