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

时间:2017-08-10 08:11:51

标签: javascript html css modal-dialog

我正在建立一个网页模板,并对模态弹出进行了一些修改,如下所示:

<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" style="background-color:#FECE1A;display:none;width:750px;left:46%" aria-hidden="true">
  <div class="modal-dialog">
  <script>
    $("#myModal4").on("show", function () {
      $("body").addClass("modal-open");
    }).on("hidden", function () {
      $("body").removeClass("modal-open")
    });
  </script>
  <!--Modal Content-->
  </div>
</div>

和body.modal-open css函数就像这样

body.modal-open {
  overflow: hidden;
}

弹出窗口工作正常。问题是每当弹出窗口出现时,我仍然可以单击模板的标题菜单和后台的一些链接。如何在后台禁用所有内容,以便我只能单击弹出窗口中的可用内容。

3 个答案:

答案 0 :(得分:4)

你可以使用叠加 - 另一个div覆盖html的屏幕的整个大小,并在身体上留下半透明的灰色阴影。

在此示例中,使用两个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();
});

&#13;
&#13;
$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分: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都不应该。这个例子只是为了指出你正确的方向。

答案 2 :(得分:0)

以下是使用CSS属性pointer-eventshttps://developer.mozilla.org/en/docs/Web/CSS/pointer-events)的示例。

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

关键的想法是在模态打开时为身体pointer-events: none;。但是,您希望与之互动的具体元素应具有以下内容: pointer-events: auto;

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