# Nested Modals. Issue with Closing Modals.

**URL:** <https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684>\
**Category:** web dev\
**Created:** [September 30, 2019, 10:43pm UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684 "2019-09-30T22:43:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [September 30, 2019, 10:43pm UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684/1 "2019-09-30T22:43:46Z")

</div>

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](#myModal1)  

  

  

  

  
  

## 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.](#myModal2)

  

  

  

  

  

  
  

## 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.](#myModal)

  

  

  

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

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [October 2, 2019, 7:08pm UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684/2 "2019-10-02T19:08:40Z")

</div>

demo: [https://codepen.io/3igdw94y/pen/dybxwXg](https://codepen.io/3igdw94y/pen/dybxwXg)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 3, 2019, 12:08am UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684/3 "2019-10-03T00:08:40Z")

</div>

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!) 🙂

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [October 3, 2019, 10:36am UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684/4 "2019-10-03T10:36:20Z")

</div>

great! thanks for your help

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [October 6, 2019, 11:29am UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684/5 "2019-10-06T11:29:38Z")

</div>

any ideas @kirupa ?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 8, 2019, 4:59am UTC](https://forum.kirupa.com/t/nested-modals-issue-with-closing-modals/640684/6 "2019-10-08T04:59:08Z")

</div>

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 ☀