0

Есть у меня модальное окно (всё в конце), которое нормально открывается / закрывается при вызове функции. Но надо, чтобы окно закрывалось при клике вне окна (затемненный фон), а если я на него накидываю функцию закрытия окна, то при клике по окну оно закрывается (я так понял из-за того, что окно является дочерним элементом). как это реализовать?

<div class="modal">
        <div class="modal-body">
            <div class="in-header">
                <i class="fa fa-close" onclick="closeModal()"></i>
            </div>
            <div class="in-body">
                Суперкрутой текст, вообще что угодно
            </div>
        </div>
    </div>
function closeModal() {

    $('.modal-body').stop().animate({
        marginTop: '-100%',
    }, 300, function(){
        $('.modal').animate({ opacity : 0 }, 200, function(){
            $('.modal').css({ 'display':'none' });
            $('.modal-body').css({ 'marginTop':'100%' });
            $('body').css("overflow", "auto");
        });
    });

}

function showModal() {

    $('.modal').css("display", "flex");
    $('body').css("overflow", "hidden");

    $('.modal').animate({
        opacity: '100%',
    }, 150, function() {
        $('.modal-body').animate({
            marginTop: 0
        }, 200);
    });

}

PS изначально задано opacity: 0, а для modal-body: margin-top: 100%, сначала показывается фон, потом снизу выплывает окно

1 ответ 1

3

Поставьте отлов события клика на фон, а там проверяйте, попадает ли клик в модальное окно, и если нет, то закрывайте его:

$(document).click(function (e) {
    if ($(e.target).is('.modal')) {
        closeModal();
    }
});

Другие примеры подобного решения можете найти в аналогичном вопросе на enSO и на codepen.io.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.