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

Question

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

//Модальные окна
    $('[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;
    });

Answer 1

Обращение к 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;
    });

БЛОГ НА HUSL

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

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