javascript - 弹出窗口打开时在后台禁用所有内容

Question

我正在开发一个基于 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 出现在网页上后禁用背景。在我的弹出窗口出现后，鼠标效果应该被禁用，并且用户应该无法单击/悬停网页上的任何其他内容(在弹出窗口的背景中)。用户需要关闭弹出窗 Eloquent 能访问该网页。我怎样才能做到这一点？是否可以只使用 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>