Вложенные модалы Zoom / Blurring. Проблема с закрытием модалов

Question

Я пытаюсь добавить некоторые функции в эту настройку. Как вы увидите, это попытка выполнить вложенную модальную настройку, которая при каждом щелчке по модальной ссылке отступает и размывает все, что находится за модальным.

Мне удалось заставить его работать, но яЯ пытаюсь сделать две вещи:

1. Заставить все исчезнуть и исчезнуть. На данный момент фон размывается и медленно убывает, но я хотел бы контролировать скорость модального открытия / закрытия.
2. заставляет клавишу ESC закрывать модалы. Это оказалось трудным, поскольку они являются вложенными.

Спасибо всем

HTML

<div id="content">
 <div class="container">
         <a href="#myModal1" class="modal-button">Modal</a>
     </div>
  </div>
 <div id="myModal1" class="modal">
   <div class="modal-container">
       <header><h2>Modal</h2><span class="close">×</span></header>
       <div class="content">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          <a href="#myModal2" class="modal-button">
         This is a nested modal link.</a>
         </p>
       </div>
     </div>
 </div>
 <div id="myModal2" class="modal">
   <div class="modal-container">
       <header><h2>Nested Modal</h2><span class="close">×</span></header>
       <div class="content">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          <a href="#myModal" class="modal-button">
         This is a nested modal link.</a>
         </p>
       </div>
     </div>
 </div>

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