Javascript 弹出窗口打开时禁用后台的所有内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44327854/
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
Disable everything in background while a popup is open
提问by Devashish Prasad
I open a pop-up by clicking on a button(#but1) and close it using button(#but2) by applying following jquery-
我通过单击按钮（#but1）打开一个弹出窗口，并通过应用以下 jquery- 使用按钮（#but2）关闭它
$(document).ready(function(){
$("#but1").click(function(){
$("#popdiv").fadeTo(200,1);
});
$("#but2").click(function(){
$("#popdiv").fadeOut(200);
});
});
The CSS for the popup is -
弹出窗口的 CSS 是 -
#popdiv
{
height:300px;
width:420px;
background-color:#97ceaa;
position:fixed;
top:200px;
left:250px;
display:none;
}
I want to disable the background after my pop-up appears. After my pop-up appears the mouse-hover effects should be disabled, and I should not be able to click anything at the back-ground. How can I achieve this? Is it possible to do this using only CSS?
我想在弹出窗口出现后禁用背景。在我的弹出窗口出现后，鼠标悬停效果应该被禁用，我应该无法点击背景上的任何东西。我怎样才能做到这一点？是否可以仅使用 CSS 来做到这一点？
回答by Arg0n
Just put it inside another container that fills the page (and show that):
只需将它放在另一个填充页面的容器中（并显示）：
$(function() {
$("#but1").click(function() {
$(".fullscreen-container").fadeTo(200, 1);
});
$("#but2").click(function() {
$(".fullscreen-container").fadeOut(200);
});
});.fullscreen-container {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(90, 90, 90, 0.5);
z-index: 9999;
}
#popdiv {
height: 300px;
width: 420px;
background-color: #97ceaa;
position: fixed;
top: 50px;
left: 50px;
}
body {
padding-top: 65px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but1">Open dialog</button>
<div class="fullscreen-container">
<div id="popdiv">
<h1>
Dialog content!
</h1>
<button id="but2">Close dialog</button>
</div>
</div>回答by Jones Joseph
You might want this:
你可能想要这个：
A backdrop surrounding your popup which covers the entire screen on top of other elements.
A structure like this:
围绕您的弹出窗口的背景，它覆盖了其他元素之上的整个屏幕。
像这样的结构：
+--------------------+
| BackDrop |
| |
| +--------------+ |
| | Pop Up | |
| | | |
| +--------------+ |
| |
| |
+--------------------+
Example
例子
$(document).ready(function() {
$("#but1").click(function() {
$(".backdrop").fadeTo(200, 1);
});
$("#but2").click(function() {
$(".backdrop").fadeOut(200);
});
});body {
margin: 0px;
padding: 0px;
}
#popdiv {
height: 40%;
width: 30%;
background-color: #97ceaa;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.backdrop {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but1">Open</button>
<div class="backdrop">
<div id="popdiv">
<button id="but2">Close</button
</div>
</div>回答by Mathias Falci
Create a background divwith the propertie z-index, for example:
div使用属性z-index创建背景，例如：
#disableDiv {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: black;
z-index: 1;
display: none;
}
Before showing your popup, show the background div, it will make impossible to click/hover on the elements "behind" it.
在显示您的弹出窗口之前，显示背景 div，将无法点击/悬停在它“后面”的元素上。
