Наслоение модальных окон

Question

Наслоение модальных окон

Рейтинг: 0Ответов: 1Опубликовано: 14.02.2023

Подскажите пожалуйста: На сайте имеется форма для отправки данных пользователя. Форма появляется в модальном окне. При успешной отправке, модальное окно с формой скрывается, и появляется модальное окно с информацией, что отправка прошла успешно.(при нажатии на крестик, закрывается). Но если попробовать еще раз отправить форму, то появляются оба модальных окна, наслаиваются одно на другое. Как бы исправить такое поведение, чтобы была возможность повторно отправлять форму?

//Модальные окна
    $('[data-modal=consultation]').on('click', function() {
        $('.overlay, #consultation').fadeIn('slow');
    });
    $('.modal__close').on('click', function() {
        $('.overlay, #consultation, #thanks, #order').fadeOut('slow');
    });

    $('.button_mini').each(function(i) {
        $(this).on('click', function() {
            $('#order .modal__descr').text($('.catalog-item__subtitle').eq(i).text());
            $('.overlay, #order').fadeIn('slow');
        })
    });
    
// Отправка формы
$('form').submit(function(e) {
        e.preventDefault();

        if (!$(this).valid()) {
            return;
        }

        $.ajax({
            type: "POST",
            url: "sendmail.php",
            data: $(this).serialize()
        }).done(function(){
            $(this).find("input").val("");
            $('#consultation, #order').fadeOut();
            $('.overlay, #thanks').fadeIn('slow');

            $('form').trigger('reset');
            
        });
        return false;
    });

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Обращение к id элементу работает лишь с первым попавшимся. Рекомендую идентифицировать кнопку закрытия окна по классу или использовать закрытие перед выполнением

//Модальные окна
    $('[data-modal=consultation]').on('click', function() {
$('.overlay, #thanks').fadeOut(0)
        $('.overlay, #consultation').fadeIn('slow');
    });
    $('.modal__close').on('click', function() {
        $('.overlay, #consultation, #thanks, #order').fadeOut('slow');
    });

    $('.button_mini').each(function(i) {
        $(this).on('click', function() {
            $('#order .modal__descr').text($('.catalog-item__subtitle').eq(i).text());
            $('.overlay, #order').fadeIn('slow');
        })
    });
    
// Отправка формы
$('form').submit(function(e) {
        e.preventDefault();

        if (!$(this).valid()) {
            return;
        }

        $.ajax({
            type: "POST",
            url: "sendmail.php",
            data: $(this).serialize()
        }).done(function(){
            $(this).find("input").val("");
            $('#consultation, #order').fadeOut();
            $('.overlay, #thanks').fadeIn('slow');

            $('form').trigger('reset');
            
        });
        return false;
    });

Наслоение модальных окон

Ответы