Nested Modals. Issue with Closing Modals.

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:

  1. 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.
  2. make the ESC key close the modals. This is proven difficult, as they are nested…

Thanks all
HTML



Modal





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

demo: https://codepen.io/3igdw94y/pen/dybxwXg

This is an interesting problem! I haven’t had a chance to look into this in detail yet, but I’ll try my best to over the next couple of days (unless somebody beats me to it!) :slight_smile:

1 Like

great! thanks for your help

any ideas @kirupa ?

So sorry, but I have been completely swamped, and your question is one that I will need to try various things out to see what is or isn’t feasible. I wish you had an easier question haha :sunny: