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

Question

我点击按钮（＃but1）打开一个弹出窗口，然后使用按钮（＃but2）关闭它，方法是应用以下jquery -

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

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

＆＃13;

＆＃13;

$(function() {
  $("#but1").click(function() {
    $(".fullscreen-container").fadeTo(200, 1);
  });
  $("#but2").click(function() {
    $(".fullscreen-container").fadeOut(200);
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用属性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，将无法单击/悬停在元素上＆＃34;后面＆＃34;它

Answer 3

你可能想要这个：

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

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