身体背景模糊功能无法普遍运作答案

【问题标题】：Body background blur functionality not working well universally身体背景模糊功能无法普遍运作
【发布时间】：2020-01-07 22:05:33
【问题描述】：

我创建了一个模态，其中我在打开模态窗口时使主体背景变得模糊，它与一组 html 代码完美配合，但与其他 html 代码有问题（当使用的 css 和 JavaScript 完全相同时，我觉得很奇怪）

问题是当模态窗口打开时（在非工作 html 代码中），模态窗口和背景一起变得模糊并永远保持这样......在其他 HTML 代码中它工作完美。打开模式后只有背景会变得模糊，关闭窗口时会变得正常 - 一切都很好

所以首先我附上了一起运行良好的代码 - Html、css 和 JavaScript

在帖子的底部，我将发布指向不同 html 代码的链接，在该代码中，由于某些未知原因，此功能似乎无法正常工作（以便任何人都可以轻松比较和调试问题）

JavaScript

let open_modals = [];

$(function() {

  // Get the button that opens the modal
  // read all the control of any type which has class as modal-button
  var btn = document.querySelectorAll(".modal-button");

  // All page modals
  var modals = document.querySelectorAll('.modal');

  // Get the <span> element that closes the modal
  var spans = document.getElementsByClassName("close");

  // When the user clicks the button, open the modal
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function(e) {
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";
      open_modals.push(modal.id);
      document.body.style.overflow = "hidden";

      if (this.parentElement.nodeName == 'BODY') {
        document.body.classList.add("open");
      } else {
        this.parentElement.parentElement.parentElement.classList.add("open");
      }
    }
  }

  function checkRenableScroll() {
    if (!open_modals.length) {
      document.body.style.overflow = "scroll";
    }
  }

  // When the user clicks on <span> (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];

          if (index > 0) {
            spans[index - 1].parentElement.parentElement.classList.remove("open");
          } else {
            document.body.classList.remove("open");
          }

          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();

          }, 400);
        }
      }
    }
  }

  //   When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];

          if (index > 0) {
            spans[index - 1].parentElement.parentElement.classList.remove("open");
          } else {
            document.body.classList.remove("open");
          }

          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();

          }, 400);
        }
      }
    }
  }
})

CSS

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 3.125rem;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625rem solid #888;
  width: 90%;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 500px;
    opacity: 0;
  }
}

@keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}

.modal-content-active {
  -webkit-animation-name: animateBottom;
  -webkit-animation-duration: 0.4s;
  animation-name: animateBottom;
  animation-duration: 0.4s;
}


/* The Close Button */

.close {
  color: #F0B823;
  float: right;
  font-size: 2.6rem;
  font-weight: bold;
  position: absolute;
  right: 0.25rem;
  top: -0.25rem;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125rem 1rem;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 1.750rem;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0;
  /* Safari */
  transition-duration: 0;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 2rem;
}

.bodytext {
  font-size: 1.125rem;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
  line-height: 2rem;
}

p {
  display: block;
  margin: 0;
  padding: 0;
}

.open > *{
 -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.modal {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);

}

.modal .open{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

工作 HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Header
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
           Your are viewing first modal<br>
<a href="#myModal2" class="modal-button">Click Here to Open Second Modal</a>
      </div>
    </div>
  </div>
</div>


<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Header
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
     Your are currently viewing second modal
      </div>
    </div>
  </div>
</div>


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque arcu est, lacinia ut posuere ut, lacinia quis ipsum. Quisque eleifend quam velit, nec accumsan ligula maximus eget. Praesent diam lorem, auctor quis justo sit amet, pretium molestie odio. Proin at est sed augue vestibulum malesuada at non lorem. Donec sit amet nisi dapibus, venenatis enim id, tristique enim. Maecenas vel sagittis arcu. Praesent et cursus tellus. Donec rhoncus blandit arcu, eu rhoncus dui semper vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu nulla luctus, consectetur leo id, ornare urna.

Integer id molestie libero, in pulvinar diam. Donec non massa metus. Integer ut velit nec turpis fermentum iaculis et sagittis dui. Vestibulum vel dignissim lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac luctus lacus, ac ultrices arcu. Curabitur dignissim arcu mauris, et eleifend lacus imperdiet nec.

Nullam eleifend massa metus, vitae sagittis erat egestas vel. Maecenas fringilla, risus ut maximus mattis, nibh lacus maximus quam, at elementum erat lectus ac urna. Aenean egestas eleifend neque, et egestas justo condimentum a. Fusce in dapibus ligula. Aliquam dui felis, vestibulum quis est a, facilisis auctor est. Vestibulum ac elit eu mauris gravida aliquam sed ut orci. Ut tincidunt lacus non gravida pharetra.
</p>

现在只需尝试用this 替换上面的 html 代码模糊功能的行为非常奇怪

希望有人能找出这个问题的原因

带有工作 html 代码的 JSBIN here

带有非工作 html 代码的 JSBIN here

请注意，JavaScript 和 css 代码完全相同，只是 html 不同

【问题讨论】：

我不是 100% 确定，但它似乎与非工作 html 代码中的部分标签有关。希望如果正确的话，这可以缩小一些调试范围。
创建一个 JSfiddle。
@AjayKumar 检查底部的问题，我添加了它
所以问题是。你的身体包含一切（显然）像模态和按钮。在模态单击上，您正在使身体发蓝（不好的做法）。结果模态的内部信息也在体内，因此从技术上讲，它也必须被蓝化（正在这样做）。你应该做的是：在 body 中创建两个 div。一个是一切。并在第二个 div 上添加模式的弹出窗口，但按钮只是弹出信息。单击按钮模糊包含所有内容的 div。
这样它只会隐藏除它自己的模态之外的所有内容。

标签： javascript html css arrays bootstrap-4

【解决方案1】：

您的代码对具有类.open (.open > *) 的元素的所有直接子元素应用模糊效果。

但是，.modal 有一个特殊规则，会将其重置为 blur(0px)，覆盖 .open > * 规则。

要使其正常工作，您必须让这个 .modal 元素成为将接收 .open 类的元素的直接子元素。这是您在第一个 sn-p 中所拥有的，但不是在您的第二个中。

由于第二个它不是该元素的直接子元素，.modal 的父元素将接收过滤器。此时，将其从您的.modal 元素中删除已经太迟了。

.open > * {
  filter: blur(5px);
}
.modal {
  filter: none;
}

<div class="open">
  <div>
    A direct Child, not .modal (and thus blurred).
    <p> Some inner content, still not .modal </p>
   </div>
  <div>
    A direct Child, not .modal (and thus blurred).
    <p class="modal"> Some inner content. This time .modal but blurred by its parent anyway...</p>
  </div>
  <div class="modal">
    A direct Child, .modal (and thus not blurred).
    <p class="modal"> Some inner content. not blurred either</p>
  </div>

</div>

因此，您必须保留此文档结构，其中您的 .modal 元素将是 .open 元素的直接子元素，并将 .open 类设置为公共父元素（例如 <body>）。要应用的另一项更改是在线this.parentElement.nodeName == 'BODY'，因为this 是<a>，并且此<a> 现在是<section> 的子项，您需要将其更改为this.parentElement.nodeName == 'SECTION' 或this.parentElement.nodeName == 'BODY' ：

let open_modals = [];

$(function() {

  // Get the button that opens the modal
  // read all the control of any type which has class as modal-button
  var btn = document.querySelectorAll(".modal-button");

  // All page modals
  var modals = document.querySelectorAll('.modal');

  // Get the <span> element that closes the modal
  var spans = document.getElementsByClassName("close");

  // When the user clicks the button, open the modal
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function(e) {
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";
      open_modals.push(modal.id);
      document.body.style.overflow = "hidden";

      if (this.parentElement.parentElement.nodeName == 'BODY') {
        document.body.classList.add("open");
      } else {
        this.parentElement.parentElement.parentElement.classList.add("open");
      }
    }
  }

  function checkRenableScroll() {
    if (!open_modals.length) {
      document.body.style.overflow = "scroll";
    }
  }

  // When the user clicks on <span> (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];

          if (index > 0) {
            spans[index - 1].closest('.open').classList.remove("open");
          } else {
            document.body.classList.remove("open");
          }

          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();

          }, 400);
        }
      }
    }
  }

  //   When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];

          if (index > 0) {
            spans[index - 1].closest('.open').classList.remove("open");
          } else {
            document.body.classList.remove("open");
          }

          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();

          }, 400);
        }
      }
    }
  }
})

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 3.125rem;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625rem solid #888;
  width: 90%;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 500px;
    opacity: 0;
  }
}

@keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}

.modal-content-active {
  -webkit-animation-name: animateBottom;
  -webkit-animation-duration: 0.4s;
  animation-name: animateBottom;
  animation-duration: 0.4s;
}


/* The Close Button */

.close {
  color: #F0B823;
  float: right;
  font-size: 2.6rem;
  font-weight: bold;
  position: absolute;
  right: 0.25rem;
  top: -0.25rem;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125rem 1rem;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 1.750rem;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0;
  /* Safari */
  transition-duration: 0;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 2rem;
}

.bodytext {
  font-size: 1.125rem;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
  line-height: 2rem;
}

p {
  display: block;
  margin: 0;
  padding: 0;
}

.open>* {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.modal {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

.modal .open {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home">
  <span class="header2 etpadding">Welcome To</span><br>
  <br><span class="header1 tpadding">WTS<br>SHOP</span><br>
  <span class="header2 mtpadding">This is a test for checking background blur</span><br>
  <a href="#product" class="button" data-scroll>Check out our Product catalogue</a><br>
</section>

<section id="product">
  <span class="header3">This is a test</span><br>

  <!-- Trigger/Open The Modal -->
  <a href="#myModal1" class="modal-button">• Modal Button 1</a>


  <p>Modal Window 2 to be launched through body of Modal 1</p>


  <!-- Trigger/Open The Modal -->
  <a href="#myModal3" class="modal-button buttonalign">• Modal button 3</a><br>


  <!-- Trigger/Open The Modal -->
  <a href="#myModal4" class="modal-button buttonalign">• Modal Button 4</a><br>


</section>

<section id="payment">
  <span class="header3">Supported Payment Methods</span>
</section>

<section id="disclaimer">
  <span class="header3">Disclaimer</span>
</section>

<section id="contact">
  <span class="header3">Contact Us</span>
</section>
<!-- The Modals must be direct children of <body> -->
<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 1
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        currently viewing modal no.1
        <a href="#myModal2" class="modal-button">Click to open modal window no.2</a>
      </div>
    </div>
  </div>
</div>


<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 2
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        You are currently viewing modal no.2
      </div>
    </div>
  </div>
</div>


<!-- The Modal -->
<div id="myModal3" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 3
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        Currently viewing modal window 3
      </div>
    </div>
  </div>
</div>


<!-- The Modal -->
<div id="myModal4" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 4
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        Currently viewing modal window 4
      </div>
    </div>
  </div>
</div>

请注意，我还用更简单的.closest(".open") 更改了一些混乱的.parentElement.parentElement.etc.。

但是如果我可以为你提供一个完整的重写，因为你已经在使用 jQuery，那么你去吧：

$(document)
  .on('click', '.modal-button', openmodal)
  .on('click', '.modal .close', closemodal)
  .on('click', '.modal', closelastmodal);

function openmodal(evt) {
  $(evt.target.getAttribute('href'))
    .addClass('visible')
    .parent().addClass('open');
}

function closemodal(evt) {
  $(evt.target)
    .closest('.modal.visible')
    .removeClass('visible')
    .parent()
    .removeClass('open')
}

function closelastmodal(evt) {
  if ($(evt.target).is('.modal')) {
    closemodal(evt);
    evt.stopImmediatePropagation();
  }
}

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.open>* {
  filter: blur(5px);
}

.modal .open {
  filter: blur(5px);
}

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 3.125rem;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  filter: none;
  /* no blur for me */
}

.modal.visible {
  display: block;
}


/* Modal Content */

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625rem solid #888;
  width: 90%;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Add Animation */

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}

.modal-content-active {
  animation-name: animateBottom;
  animation-duration: 0.4s;
}


/* The Close Button */

.close {
  color: #F0B823;
  float: right;
  font-size: 2.6rem;
  font-weight: bold;
  position: absolute;
  right: 0.25rem;
  top: -0.25rem;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125rem 1rem;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 1.750rem;
  margin: 0.124em 0.062em;
  transition-duration: 0;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 2rem;
}

.bodytext {
  font-size: 1.125rem;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
  line-height: 2rem;
}

p {
  display: block;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home">
  <span class="header2 etpadding">Welcome To</span><br>
  <br><span class="header1 tpadding">WTS<br>SHOP</span><br>
  <span class="header2 mtpadding">This is a test for checking background blur</span><br>
  <a href="#product" class="button" data-scroll>Check out our Product catalogue</a><br>
</section>
<section id="product">
  <span class="header3">This is a test</span><br>
  <!-- Trigger/Open The Modal -->
  <a href="#myModal1" class="modal-button">• Modal Button 1</a>
  <p>Modal Window 2 to be launched through body of Modal 1</p>
  <!-- Trigger/Open The Modal -->
  <a href="#myModal3" class="modal-button buttonalign">• Modal button 3</a><br>
  <!-- Trigger/Open The Modal -->
  <a href="#myModal4" class="modal-button buttonalign">• Modal Button 4</a><br>
</section>
<section id="payment">
  <span class="header3">Supported Payment Methods</span>
</section>
<section id="disclaimer">
  <span class="header3">Disclaimer</span>
</section>
<section id="contact">
  <span class="header3">Contact Us</span>
</section>
<!-- The Modals must be direct children of <body> -->
<!-- The Modal -->
<div id="myModal1" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 1
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        currently viewing modal no.1
        <a href="#myModal2" class="modal-button">Click to open modal window no.2</a>
      </div>
    </div>
  </div>

  <div id="myModal2" class="modal">

    <!-- Move inner modal inside as a direct child of the first modal -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">×</span>
        <div class="headertext">
          Modal Window 2
        </div>
      </div>
      <div class="modal-body">
        <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
        <div class="bodytext">
          You are currently viewing modal no.2
        </div>
      </div>
    </div>
  </div>
</div>

<!-- The Modal -->
<div id="myModal3" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 3
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        Currently viewing modal window 3
      </div>
    </div>
  </div>
</div>


<!-- The Modal -->
<div id="myModal4" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
        Modal Window 4
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
        Currently viewing modal window 4
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢您详细回答，我尝试了您的代码。它在很大程度上改善了我的问题。我面临的代码仍然存在 2 个小问题。 1）如果我打开第一个模态窗口，然后在其上打开第二个模态窗口，第一个模态窗口不会变得模糊...... 2）如果我已经打开了 2 个模态窗口，并且我关闭第二个（通过十字图标）即使第一个模态仍然处于活动状态，身体背景模糊也会被移除。奇怪的是，如果通过单击窗口外关闭模态框，则不会发生第二个问题
很可能你错过了 JavaScript 中的一些行。
我首先误读了您的评论，您的观点是正确的，我确实破坏了一些功能。现已修复。$
感谢您调整它，先生，现在您的代码工作正常。我的问题 html 代码不工作......虽然我想出了一组不同的 html 代码，这会导致不同的问题。 ..我将在 cmets 本身中发布它。很抱歉扩展它，但我喜欢探索每一种可能性
我添加了对 js 的完全重写作为最后一个 sn-p。您可能想改用它，它更灵活。并不是说现在内部模态必须是其父模态的直接子级。

【解决方案2】：

修复了这个问题。 https://codepen.io/phong18/pen/VwZzZQm

替换

document.body.classList.add("open");

通过这个：

document.getElementById("product").classList.add("open");

替换

document.body.classList.remove("open");

作者：

document.getElementById("product").classList.remove("open");

更新 IF 函数：

来自

if (this.parentElement.nodeName == 'BODY') {
        document.body.classList.add("open");
      } else {
        this.parentElement.parentElement.parentElement.classList.add("open");
      }

到：

if(this.parentElement.matches('#product')){
           document.getElementById("product").classList.add("open");
         } else{
           this.parentElement.parentElement.parentElement.classList.add("open");
         }

【讨论】：

感谢您的回复。我试过了，但没有用。身体背景和模态都像之前一样变得模糊并一直保持在那个状态
我试过了，但它只会模糊背景中的按钮，而不是 activte modal 背后的整个背景
你看过我的演示了吗？
以下接受的答案是有效的解决方案，您可以检查一下。它的好资料。再次感谢您一直以来对我的帮助。