Hi all,
I am trying to add some functionality to this setup.
As you will see, it is an attempt to make a nested modal setup, that on every click on a modal link, it recedes and blurs everything behind the modal.
I have managed to make it work, but I am trying to do two things:
- make everything fade in and fade out. As of now, the background blurs and recedes slowly, but I would like to control the speed of the modal opening/closing.
- make the ESC key close the modals. This is proven difficult, as they are nested…
Thanks all
HTML
Modal
×Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
This is a nested modal link.
Nested Modal
×Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
This is a nested modal link.
CSS
.container {width: 80%;margin: auto;padding-top:40px; font-size: 2vw;}
#content { position:absolute; top:0; left:0; width: 100%; height:100%; overflow:auto;}
.modal { box-sizing: border-box; display: none; position: fixed; z-index: 1; padding-top: 3.125rem; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all 1.0s ease; }
.modal-container{-ms-box-orient: vertical; display: -ms-flex; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;font-size: 2vw;}
/* The Close Button */
.close {float:right; font-size: 4vw;padding-right: 10px; transition: all 1.0s ease;}
.close:hover, .close:focus { color: lightgrey; text-decoration: none; cursor: pointer; }
/* Modal Content */
header, .content, footer {width: 80%;margin:auto;}
header.image, .contentImage, footer.image {width: 100%;margin:auto;}
.content {background: none; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; height: 80vh;}
.open { overflow: hidden; }
.open>* { -webkit-filter: blur(5px); filter: blur(5px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
.modal { -webkit-filter: blur(0px); filter: blur(0px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
.modal .open { -webkit-filter: blur(5px); filter: blur(5px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
JS
$(function () {
const openModals = [];
$(‘a.modal-button’).click(e => {
e.preventDefault();
$(e.target).closest(’.modal’).add(‘body’).addClass(‘open’);
openModals.push($($(e.target).attr(‘href’)).fadeIn());
});
$(window).add(’.close’).click(e => {
e.stopPropagation();
if ($(e.target).is(’.modal, .close’)) {
const closing = openModals.pop().addClass(‘modal-content-active’);
setTimeout(() => {closing.hide().removeClass(‘modal-content-active’)}, 0);
if (openModals.length > 0) {
openModals[openModals.length - 1].removeClass(‘open’);
} else $(‘body’).removeClass(‘open’);
}
});
});
