Your code utilizes the blur effect on all immediate children of elements with the class .open (.open > *).
However, there is a special rule for the .modal class that resets the blur to blur(0px), overriding the earlier rule.
To ensure it works correctly, the .modal element must be a direct child of the element receiving the .open class. This is as you have in your first code snippet, but not in the second.
In the second example, since the .modal is not a direct child of this element, the parent of .modal will receive the filter. By that time, it's too late to remove it from your .modal element.
.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>
Ensure that the document structure maintains the relationship where .modal elements are direct children of the .open element and apply the .open class to a common parent (e.g., <body>).
Another update required is on the line
this.parentElement.nodeName == 'BODY'
because
this refers to the
<a> which is now a child of
<section>. You need to adjust it to either
this.parentElement.nodeName == 'SECTION'
or
this.parentElement.nodeName == 'BODY'
:
let open_modals = [];
$(function() {
var btn = document.querySelectorAll(".modal-button");
var modals = document.querySelectorAll('.modal');
var spans = document.getElementsByClassName("close");
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";
}
}
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
// close modal logic
};
}
window.onclick = function(event) {
// close modal logic when clicking outside
}
})
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
/* The Modal (background) */
// CSS styles here
.modal {
// more CSS styles
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// HTML code snippets here
I also simplified some parts using jQuery functions for easier handling. Additionally, I made changes to streamline the process based on your existing setup. Feel free to adapt and modify further for your specific needs.