Modal Window getting blurred unreasonably

Question

Intro - I have created a modal window wherein multiple modal windows can be opened on top of each other and closed one-by-one Recently i added blur functionality wherein if a modal window is opened , the body background goes blur and if second window is opened , both the body and the first window becomes blur. And it follows same concept while closing ... Closing second window makes first window normal and closing the first window makes the body background normal.

Its works great most of the times but there are issues sometimes if i do a little change in the html codes ( the Javascript and CSS codes being the same always ) which is.. After i close the second window , the first modal window doesn't return to a non blurred state and stays forever like that

How to Reproduce the issue - Very Simple , In the html section - Line 32 ( You can find it at the bottom in html snippets )

<a href="#myModal2" class="modal-button">Click here to open second modal window</a>

Replace it with ( just adding span tag bold )

<span class="bold"><a href="#myModal2" class="modal-button">Click here to open second modal window</a></span>

Yes , its that simple just doing this will cause the issue i have reported above , on another note its not limited to span tag. Using any other tag like ul , li to enclose this line no.32 in html causes reported issues as well. In simple words , To avoid this issue , this particular line must not be enclosed with any other tag , that's quite problematic

Its quite confusing as to me as why this is happening in first place , Hoping someone can provide some solution .

Here's a JSBIN showing the reported issue in action by just adding span tag as explained above

i am including all 3 - JavaScript , Css and working HTML codes at bottom for reference

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);
        }
      }
    }
  }
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<section id="first">

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

</section>

<!-- 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">
          You are currently viewing first Modal window
<a href="#myModal2" class="modal-button">Click here to open second modal window</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 window 2
      </div>
    </div>
  </div>
</div>

</body>
</html>

@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);
}

.bold {
  display: inline-block;
  font-weight: 900;
}

Answer 1

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) {
            var parentModal = spans[index - 1].parentElement.parentElement;
            parentModal.classList.remove("open");
            if (parentModal.getElementsByClassName('open').length > 0) {
              parentModal.getElementsByClassName('open')[0].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) {
            var parentModal = spans[index - 1].parentElement.parentElement;
            parentModal.classList.remove("open");
            if (parentModal.getElementsByClassName('open').length > 0) {
              parentModal.getElementsByClassName('open')[0].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);
        }
      }
    }
  }
})