Javascript 如何使模态背景变暗

Question

当我打开模式时，我无法使背景变暗。 我找到了大量关于如何使用引导程序执行此操作的信息，但我正在寻找一种使用 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

你可以有一个带有 class modalBackdrop的 div 来使背景变暗。 您可以让它占据整个页面，并为其赋予具有透明度的颜色，如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>

并将以下 styles 添加到您的 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 如何使模态背景变暗

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-02-01 19:32:55

Javascript 如何使模态背景变暗

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-02-01 19:32:55

解决方案1
0 已采纳 2022-02-01 19:32:55