在弹出窗口打开时禁用背景中的所有内容答案

【问题标题】：Disable everything in background while a popup is open在弹出窗口打开时禁用背景中的所有内容
【发布时间】：2017-06-02 11:30:35
【问题描述】：

我正在开发一个基于 HTML、JQuery 和 CSS 的网页，我想在其上使用简单的 div 标签打开弹出窗口。我想在弹出窗口打开时禁用后台的所有内容。这意味着当弹出 div 对用户可见时，他或她不应该能够点击网页上的任何其他内容（弹出窗口后面或背景中的任何内容）。

以下是我正在尝试的方式。我通过单击 HTML 按钮 (#but1) 打开一个弹出窗口，并通过应用以下 jquery 使用按钮 (#but2) 关闭它-

$(document).ready(function(){
    $("#but1").click(function(){
            $("#popdiv").fadeTo(200,1);           
        });
    $("#but2").click(function(){
            $("#popdiv").fadeOut(200);              
        });
});

弹出 div 的 CSS 是 -

#popdiv
{
    height:300px;
    width:420px;
    background-color:#97ceaa;
    position:fixed;
    top:200px;
    left:250px;
    display:none;
}

我想在我的弹出 div 出现在网页上后禁用背景。在我的弹出窗口出现后，鼠标效果应该被禁用，并且用户不应该能够单击/悬停网页上的任何其他内容（在弹出窗口的背景中）。用户需要关闭弹出窗口才能访问网页。我怎样才能做到这一点？是否可以仅使用 CSS 来做到这一点？

【问题讨论】：

你能不能把相关的html代码也贴出来或者工作的sn-p
文章stackoverflow.com/questions/17103723/…中的回答应该对您有帮助....否则您可以向我们提供html详细信息。
新人注意！在屏幕上设置弹出窗口或使用一些 z-index hack 可以很容易地被检查选项卡绕过。所以如果你想严格禁止用户与后台交互，就不要使用这种方法。

标签： javascript jquery html css

【解决方案1】：

只需将它放在另一个填充页面的容器中（并显示）：

$(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>

【讨论】：

请问为什么你的 z-index 使用这么高的数字？
@Gezzasa 让这个元素最有可能在顶部。
这就是我要找的……谢谢……
这将一直有效，直到用户 (shift+) 浏览您的元素并且现在可以按下您打算禁用的按钮。

【解决方案2】：

你可能想要这个：

围绕您的弹出窗口的背景，在其他元素之上覆盖整个屏幕。
这样的结构：

+--------------------+
| BackDrop           |
|                    |
|  +--------------+  |
|  | Pop Up       |  |
|  |              |  | 
|  +--------------+  |
|                    |
|                    |
+--------------------+

示例

$(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>

【讨论】：

【解决方案3】：

使用属性z-index创建背景div，例如：

#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;
}

在显示您的弹出窗口之前，显示背景 div，它将无法单击/悬停在它“后面”的元素上。

【讨论】：