如何在弹出模态窗口时禁用背景

Answer 1

您可以使用覆盖层 - 另一个覆盖 html 的屏幕全尺寸的 div，其优点是在主体上提供半透明的灰色阴影。

在此示例中，使用两个 div。

一个是覆盖层，另一个（为了方便起见在覆盖层内）是模态框。

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>

现在叠加层需要样式：

.overlay {
  position: fixed; /* Positioning and size */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5); /* color */
  display: none; /* making it hidden by default */
}

模态也需要一些：

.modal {
  position: fixed; /* positioning in center of page */
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px; /* size */
  width: 600px;
  background-color: white; /* background color */
}

通过输入以下内容来包含 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

在代码顶部的 head 标签中。

然后，使用此按钮打开模式：

<button onclick="$('.overlay').show();">Open modal</button>

这个 jQuery 代码用于捕获覆盖层上的点击，但不捕获其子覆盖层上的点击。

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5);
  display: none;
}
.modal {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px;
  width: 600px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="https://www.google.co.uk">This is a link, but with the modal open you can't click it!</a>
<br>
<br>
<button onclick="$('.overlay').show();">Open modal</button>

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>

Answer 2

简介

一个简单的解决方案是添加一个

<div>

来覆盖背景，并位于弹出窗口下方但位于所有其他内容上方。

下面是一个非常简单的例子，我想象你正在尝试做的事情。希望您可以调整它以适合您的场景。

示例

function openModal() {
  $("#overlay").css({"display":"block"});
  $("#modal").css({"display":"block"});
}

#modal {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border:solid 1px #000;
  display:none;
  background-color:#fff;
}

#overlay {
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  display:none;
  background-color:#000;
  opacity:0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Awesome Content!

<button onclick="openModal()">Open Modal!</button>

<div id="overlay"></div>
<div id="modal"><h1>Modal Content!</h1></div>

要点

• #overlay

  div 位于

  #modal

  div 之前 - 这就是我将模态设置为顶部的方式。或者，您可以在 CSS 中使用

  z-index

  ；

• 此处不需要

  opacity

  值，它只是用作叠加层相对于页面/模式的位置的演示；

• 这里的实现细节都不重要。 JavaScript 不应该很重要，我的大部分 CSS 也不应该重要。这个例子的存在只是为了给你指明正确的方向。

Answer 3

这是使用 CSS 属性的示例

pointer-events

(https://developer.mozilla.org/en/docs/Web/CSS/pointer-events)。

示例：https://codepen.io/zvona/pen/YxQzEO

关键思想是在模态打开时为主体设置

pointer-events: none;

。但是您想要与之交互的特定元素应该具有例如

pointer-events: auto;

。

在示例中，当对话框隐藏时，您可以单击两个按钮，但当显示对话框时，只能单击切换对话框按钮。

Answer 4

当模式打开时：

document.body.classList.add('overflow-hidden')

模态关闭时：

document.body.classList.remove('overflow-hidden')