点击后画面弹框背景变灰阴影层

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

　　先简要理一下实（shuo）现（ren）思（hua）路：

• 点击事件之后要呈现半透明灰色背景挡住原页面
• 灰色背景之上弹出对话框（或是信息页面）
• 对话框关闭按下之后，对话框消失
• 灰色背景消失　

 

　　html、css方面：

1. 信息页面得是绝对布局保证弹出位置固定（如果需要绝对居中则增加样式：top：50%；left：50%；margin-top：信息页面高度的一半；margin-left：信息页面宽度的一半）；
2. z-Index属性原页面、阴影层、信息页面依次递增（最大在最上面）；
3. display初始为none；
4. 背景层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";

　　

转载于:https://www.cnblogs.com/codingHeart/p/6636169.html