弹出窗口打开时禁用后台的所有内容

Question

我通过单击按钮（#but1）打开一个弹出窗口，并通过应用以下 jquery- 使用按钮（#but2）关闭它

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

弹出窗口的 CSS 是 -

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

我想在弹出窗口出现后禁用背景。在我的弹出窗口出现后，鼠标悬停效果应该被禁用，我应该无法点击背景上的任何东西。我怎样才能做到这一点？是否可以仅使用 CSS 来做到这一点？

Answer 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>

Answer 2

你可能想要这个：

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

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

例子

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