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 [ On a Side Note , My modal has functionality to open and close multiple modal windows one by one , so if second modal window is opened , i want the blurred effect to be applied on the first window too along with the body of course ]
Edit - i created a css class with blur effect
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
But i don't know JavaScript well enough to have it implemented ,also some people recommending it just needs css , that is the case when you create a bootstrap modal which mine is not ..The opening and closing of modal here is handled by JavaScript and not by a css class like in case of bootstrap modal
I am attaching the Javascript and CSS codes below in snippets Can someone please adjust the codes to have the desired effect ?
if someone wants to have a look on the whole codes including HTML and output , you can check it here
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";
}
}
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];
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];
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;
}
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
