Закрыть модальное окно на Esc и убрать скролл

Подскажите как закрыть модальное окно на Esc и убрать скролл к верху страницы при открытии модального окна

HTML:

<div class="cooperation__wrapper-btn">
     <a class="cooperation__wrapper-link main-btn" href="#">оставить заявку</a>
</div>
<div class="modal-overlay">
    <div class="modal">
        <a class="close-modal">
            <svg viewBox="0 0 20 20">
                <path fill="#000000"
                    d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z">
                </path>
            </svg>
        </a>
        <div class="modal-content">
            <h3>будет форма</h3>
        </div>
    </div>
</div><!-- overlay -->

CSS:

@media only screen and (min-width: 40em) {
    .modal-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        backface-visibility: hidden;
        transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
    }
    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
    width: 600px;
    max-width: 75rem;
    min-height: 20rem;
    padding: 1rem;
    border-radius: 3px;
    opacity: 0;
    overflow-y: auto;
    visibility: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backface-visibility: hidden;
    transform: scale(1.2);
    transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

.modal .close-modal {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 15px;
    opacity: 0;
    backface-visibility: hidden;   
    transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);    
    transition-delay: 0.3s;
}

.modal .close-modal svg {
    width: 1.75em;
    height: 1.75em;
}

.modal .modal-content {
    opacity: 0;
    backface-visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
    transition-delay: 0.3s;
}

.modal.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.modal.active .modal-content {
    opacity: 1;
}

.modal.active .close-modal {
    transform: translateY(10px);
    opacity: 1;
}

@media only screen and (max-width: 39.9375em) {  
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        transform: scale(1.1);
        padding: 0 !important;
    }
    .close-modal {
        right: 20px !important;
    }
}

jquery:

var elements = $('.modal-overlay, .modal');

$('.cooperation__wrapper-link').click(function(){
    elements.addClass('active');
});

$('.close-modal').click(function(){
    elements.removeClass('active');
});

Ответы (1 шт):

Автор решения: highpassion

Попробуйте это сделать так, я добавил обработчик нажатия клавиши Esc внутри обработчика события click. Также я добавил e.preventDefault();, поскольку у браузера есть стандартное поведение при нажатии этой клавиши.

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

Ссылки, которые помогут:

Узнать keycode

jQuery Event Object

var elements = $('.modal-overlay, .modal');

$('.cooperation__wrapper-link').click(function(){
    elements.addClass('active');
    $(document).on('keydown', function(e){
      if(e.which === 27){ // key = esc (27)
          elements.removeClass('active');
          var home = $.Event("keydown", {keyCode: 36}); //
          $(document).trigger(home);
          e.preventDefault();
          return false;
      }
  });
});

$('.close-modal').click(function(){
    elements.removeClass('active');
});
@media only screen and (min-width: 40em) {
    .modal-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        backface-visibility: hidden;
        transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
    }
    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
    width: 600px;
    max-width: 75rem;
    min-height: 20rem;
    padding: 1rem;
    border-radius: 3px;
    opacity: 0;
    overflow-y: auto;
    visibility: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backface-visibility: hidden;
    transform: scale(1.2);
    transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

.modal .close-modal {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 15px;
    opacity: 0;
    backface-visibility: hidden;   
    transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);    
    transition-delay: 0.3s;
}

.modal .close-modal svg {
    width: 1.75em;
    height: 1.75em;
}

.modal .modal-content {
    opacity: 0;
    backface-visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
    transition-delay: 0.3s;
}

.modal.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.modal.active .modal-content {
    opacity: 1;
}

.modal.active .close-modal {
    transform: translateY(10px);
    opacity: 1;
}

@media only screen and (max-width: 39.9375em) {  
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        transform: scale(1.1);
        padding: 0 !important;
    }
    .close-modal {
        right: 20px !important;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cooperation__wrapper-btn">
     <a class="cooperation__wrapper-link main-btn" href="#">оставить заявку</a>
</div>
<div class="modal-overlay">
    <div class="modal">
        <a class="close-modal">
            <svg viewBox="0 0 20 20">
                <path fill="#000000"
                    d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z">
                </path>
            </svg>
        </a>
        <div class="modal-content">
            <h3>будет форма</h3>
        </div>
    </div>
</div><!-- overlay -->

→ Ссылка