How To Make Background Blurred When Modal Window Is Opened

I have created a modal window using HTML, CSS and JavaScript I would like the body background to be blurred when a modal window is opened , so that the opened window looks focused

Solution 1:

You can use blur filter to achieve that effect. Have a css class with blur filter and apply that class conditionally to your modals.

Solution 2:

I added js:

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

Update css:

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

}

full js :

let open_modals = [];

$(function() {

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

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

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

  // When the user clicks the button, open the modalfor (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");
     } 
    }
  }

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

  // When the user clicks on <span> (x), close the modalfor (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 itwindow.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);
        }
      }
    }
  }
})

Demo here: https://codepen.io/phong18/pen/VwZzZQm