Javascript HTML/CSS“弹出”窗口和禁用背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4396790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS "Pop-Up" Window and Disabled Background
提问by Sev
This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
这是一个愚蠢的问题，因为不幸的是，我无法通过搜索谷歌找到正确的关键字来获得答案。
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
您知道当您单击链接时，背景会变暗并变得无法使用，但前景通常会有图像或登录框吗？就像雅虎邮件图像显示方法一样，背景中的所有内容都变成灰色透明，图像本身就很好？
How is that done? And what is it called?
这是怎么做的？它叫什么？
回答by rémy
it's done by creating an overlaying div on the fly in JS, like:
它是通过在 JS 中动态创建一个覆盖的 div 来完成的，例如：
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
使用 CSS 类，如
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..
不知道怎么称呼..
回答by Matt Asbury
You want to create a "modal box" or "lightbox". Examples:
您想创建一个“模态框”或“灯箱”。例子：
