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

1. <div id="content">
2.  <div class="container">
3.          <a href="#myModal1" class="modal-button">Modal</a>
4.      </div>
5.   </div>
6.  <div id="myModal1" class="modal">
7.    <div class="modal-container">
8.        <header><h2>Modal</h2><span class="close">×</span></header>
9.        <div class="content">
10.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
11.           <a href="#myModal2" class="modal-button">
12.          This is a nested modal link.</a>
13.          </p>
14.        </div>
15.      </div>
16.  </div>
17.  <div id="myModal2" class="modal">
18.    <div class="modal-container">
19.        <header><h2>Nested Modal</h2><span class="close">×</span></header>
20.        <div class="content">
21.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
22.           <a href="#myModal" class="modal-button">
23.          This is a nested modal link.</a>
24.          </p>
25.        </div>
26.      </div>
27.  </div>

CSS

1. .container {width: 80%;margin: auto;padding-top:40px; font-size: 2vw;}
2. #content { position:absolute; top:0; left:0; width: 100%; height:100%; overflow:auto;}
3. 
   
4. .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; }
5. 
   
6. .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;}
7. 
   
8. /* The Close Button */
9. .close {float:right; font-size: 4vw;padding-right: 10px; transition: all 1.0s ease;}
10. .close:hover, .close:focus { color: lightgrey; text-decoration: none; cursor: pointer; }
11. /* Modal Content */
12. header, .content, footer {width: 80%;margin:auto;}
13. header.image, .contentImage, footer.image {width: 100%;margin:auto;}
14. .content {background: none; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; height: 80vh;}
15. 
    
16. .open { overflow: hidden; }
17. .open>* { -webkit-filter: blur(5px); filter: blur(5px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
18. .modal { -webkit-filter: blur(0px); filter: blur(0px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
19. .modal .open { -webkit-filter: blur(5px); filter: blur(5px); transform: scale(0.9); transition: all 0.5s ease-in-out;}

JS

1. $(function () {
2.   const openModals = [];
3.   $('a.modal-button').click(e => {
4.     e.preventDefault();
5.     $(e.target).closest('.modal').add('body').addClass('open');
6.     openModals.push($($(e.target).attr('href')).fadeIn());
7.   });
8.   $(window).add('.close').click(e => {
9.     e.stopPropagation();
10.     if ($(e.target).is('.modal, .close')) {
11.       const closing = openModals.pop().addClass('modal-content-active');
12.       setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0);
13.       if (openModals.length > 0) {
14.         openModals[openModals.length - 1].removeClass('open');
15.       } else $('body').removeClass('open');
16.     }
17.   });
18. });