Javascript 如何使模态背景变暗

Question

我在打开模式时无法使背景变暗。我找到了大量关于如何使用 bootstrap 执行此操作的信息，但我正在寻找一种使用 javascript 执行此操作的方法。我目前有模式打开和关闭，所以我只需要实现背景功能。

HTML

  <body>
    <h1>Modal</h1>
    <button id="myBtn" data-toggle="modal fade" data-target="#myModal">Open Modal</button>
    <section class="modal hidden" id="myModal">
      <span class="close">&times;</span>
      <h2>I am the modal</h2>
      <p>hello world</p>
    </section>
  </body>

CSS

.modal {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: solid 2px black;
    border-radius: 10px;
    padding: 30px;
    margin: 20px 0;
    background-color: greenyellow;
}

  .hidden{
    display: none;
 }

JS

var modal = document.getElementById("myModal");


var btn = document.getElementById("myBtn");


var span = document.getElementsByClassName("close")[0];


btn.onclick = function() {
  modal.style.display = "block";
}


span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

任何关于如何实现背景的帮助或起点将不胜感激。

Answer 1

您可以使用 div 和 class modalBackdrop 来使背景变暗。你可以让它占据整个页面，并给它一个像 rgba(0,0,0,0.2) 这样具有透明度的颜色。您可以将 HTML 替换为以下内容以添加模态背景 div 元素。

 <body>
    <h1>Modal</h1>
    <button id="myBtn" data-toggle="modal fade" data-target="#myModal">Open Modal</button>
    <div class="modalBackdrop hidden"></div>
    <section class="modal hidden" id="myModal">
      <span class="close">&times;</span>
      <h2>I am the modal</h2>
      <p>hello world</p>
    </section>
  </body>

并将以下样式添加到模态背景CSS中

.modalBackdrop{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,0.2);
}

最后，将您的 JS 替换为以下内容，以便在需要时显示和隐藏背景

var modal = document.getElementById("myModal");


var btn = document.getElementById("myBtn");

var modalBackdrop = document.getElementsByClassName("modalBackdrop")[0];


var span = document.getElementsByClassName("close")[0];


btn.onclick = function() {
  modal.style.display = "block";
  modalBackdrop.style.display = "block";
}


span.onclick = function() {
  modal.style.display = "none";
  modalBackdrop.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    modalBackdrop.style.display = "none";
  }
}

此外，在 CSS 中降低透明度会使显示模式时背景变暗。

Javascript 如何使模态背景变暗

Javascript how to darken modal backdrop

javascript

css

modal-dialog

backdrop