程序员经验分享-hwhale

身体背景模糊功能普遍效果不佳

2024-01-06

我创建了一个模态，其中当打开模态窗口时，我使主体背景变得模糊， 它与一组 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>

现在尝试将上面的 html 代码替换为this https://del.dog/bacowivami.htm模糊功能的行为非常奇怪

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

JSBIN 与工作 html 代码here https://jsbin.com/pohusajanu/edit?output

JSBIN 与非工作 html 代码here https://jsbin.com/kekizajori/1/edit?output

请注意，JavaScript 和 css 代码完全相同，唯一的区别是 html


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

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

为了让它工作，你必须有这个.modal元素是一个direct将接收的元素的子元素.open班级。 这是您在第一个片段中拥有的内容，但在第二个片段中则不是。

因为在第二个中它不是direct该元素的子元素，.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' since this is the <a>并且这个<a>现在是<section>，您需要将其更改为this.parentElement.nodeName == 'SECTION' or 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>

请注意，我还改变了一些乱七八糟的.parentElement.parentElement.etc.用一个更简单的.closest(".open").

但如果我可以为您提供完整的重写，因为您已经在使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

Arrays

Bootstrap4

身体背景模糊功能普遍效果不佳 的相关文章

  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏

  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu

  • 如何使用 jQuery UI Sortable 正确相交？

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang

  • 如何 grep 遍历数组，同时过滤掉匹配项？

    有没有一种快速简便的方法来 grep 遍历数组 找到满足某些测试的元素and从原始数组中删除这些 例如我想要 a 1 7 6 3 8 4 b grep filter gt 5 a now b 7 6 8 and a 1 3 4 换句话说 我

  • 将 ESLint 与 Airbnb 样式和选项卡结合使用 (React.js)

    我正在开发一个 React js 应用程序 并且正在尝试检查我的代码 我将 ESLint 与 Airbnb 风格一起使用 但出现以下错误 src Test jsx 4 2 error Unexpected tab character no

  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点

  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta

  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti

  • 将数字限制为段的最优雅的方法是什么？

    比方说x a and b是数字 我需要限制x到段的边界 a b 换句话说 我需要一个钳位功能 https math stackexchange com q 1336636 clamp x max a min x b 有人能想出一个更易读的版

  • 是否可以让 webpacks System.import 使用 ajax （用于进度事件）？

    所以我刚刚更新到 webpack 2 并进行了第一个工作设置 其中 webpack 通过查看 System import 调用自动创建块 相当甜蜜 但是 我使用 ajax 调用加载初始块 以便我可以加载时显示进度 https stackov

  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh

  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2

  • 按字典顺序对整数数组进行排序 C++

    我想按字典顺序对一个大整数数组 例如 100 万个元素 进行排序 Example input 100 21 22 99 1 927 sorted 1 100 21 22 927 99 我用最简单的方法做到了 将所有数字转换为字符串 非常昂贵

  • 如何使用 HTML5 Javascript Canvas 获取三个碰撞形状的交集并删除不碰撞的部分？

    我最近专门针对 KonvaJs 发布了类似的问题here https stackoverflow com questions 64603077 how can i get the intersection of three shapes c

  • 如何在 Aframe 中的平面上加载 gif（具有透明度）（故障）？

    大家好 我是 Aframe 的新手 正在尝试在空间网络环境中设置一大堆 gif 我在飞机上加载 gif 时遇到了一些困难 我已经通过 Aframe 的资产文件夹加载了图像 故障 目前它看起来像这样

  • 当td内容太宽时，表格溢出父div

    我准备了一个 JSFiddle 来解释 向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错 但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度 整个表

  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

  • 如何使用 PHP 获取列中的所有值？

    我一直在到处寻找这个问题 但仍然找不到解决方案 如何从 mySQL 列中获取所有值并将它们存储在数组中 例如 表名称 客户 列名称 ID 名称 行数 5 我想获取此表中所有 5 个名称的数组 我该如何去做呢 我正在使用 PHP 我试图 SE

  • 将一维数组转换为二维数组[重复]

    这个问题在这里已经有答案了 我正在开发一个程序 我必须将文本文件中的值读入一维数组 我已经成功获取该一维数组中的数字 m1 1 2 3 4 5 6 7 8 9 但我希望数组是 m1 1 2 3 4 5 6 7 8 9 您可以使用此代码 co

  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几

随机推荐

热门标签