Нажав «Отправить» в форме, закрывает модальное окно

Question

У меня есть модальное окно, которое позволяет пользователям отправлять форму как один из вызовов к действию. Однако нажатие «Отправить» закрывает модальное окно, но я не хочу этого. Here is the page: infowest.com/residential-internet.

Чтобы активировать модальное окно, пользователь нажимает желто-оранжевую кнопку «Начать» на любой из «карт» интернет-опций. Затем, чтобы заполнить и отправить форму, пользователь нажимает кнопку «Запросить обратный вызов». На самом деле, найдите, щелкнув «В любое время», кнопка «Запросить обратный вызов» закрывает модальное окно, а не просто нажимает кнопку «Отправить».

Я попытался с помощью этого кода:

if ($(event.target).is('.modal-window-content')) { 
    return false; 
} 
if ($(event.target).is('input')) { 
    return false; 
} 

держать модальный от закрытия, который работал, но не позволяет форма представить или даже попытаться представить. Форма использует Ajax. Это плагин WP Contact Form 7.

Я использую jQuery, который я только что придумываю, но я никогда не преподавал jQuery, поэтому я предполагаю, что делаю ошибки в js-коде. Вот мой код:

var pagePosition; 
$('.js--activate-cta-modal').click(function() { 
    if ((!$(this).hasClass('.active')) && (!$('body').hasClass('modal-active'))) { 
    pagePosition = $(window).scrollTop(); 
    $('.cta-modal-window').css("margin-top", pagePosition); 
    $(this).addClass("active"); 
    $('body').addClass("modal-active"); 
    $('body').css("top", -pagePosition); 
    return false; 
    } 

    if($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
    $('body').removeClass('modal-active') 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
    } 
}); 
$('.js--activate-cta-modal').click(function (e) { 
    e.stopPropagation(); 
}); 
$('.modal-overlay').click(function() { 
    $('body').removeClass('modal-active'); 
    $('.js--activate-cta-modal').removeClass('active'); 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
}); 
$('.cta-modal-window').click(function() { 
    // if ($(event.target).is('.modal-window-content')) { 
    // return false; 
    // } 
    // if ($(event.target).is('input')) { 
    // return false; 
    // } 
    $('body').removeClass('modal-active'); 
    $('.js--activate-cta-modal').removeClass('active'); 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
}); 
$('.close-modal-window').click(function() { 
    $('body').removeClass('modal-active'); 
    $('.js--activate-cta-modal').removeClass('active'); 
    $('body').css("top", "0"); 
    $('body').scrollTop(pagePosition); 
}); 

Я очень ценю любую помощь! Спасибо!

Answer 1

Важно не путать Event.stopPropagation() и Event.preventDefault(), а также точно понимать, что они делают.

Event.stopPropagation() не позволит событиям пузыряться через DOM. Обычно, если вы нажмете на элемент, его событие попытается запустить, а затем родительский элемент попытается запустить его версию события и так далее по дереву. Это используется для хранения событий до определенного уровня на DOM.

Event.preventDefault() останавливает действие по умолчанию, которое элементы могут иметь при запуске. Наиболее распространенным является использование этого на form, чтобы остановить его от отправки. Это используется для отмены поведения элементов по умолчанию с определенными событиями.

Вот пример общей техники модальной постановки. http://codepen.io/Oka/pen/xGKJVJ

(Если вы новичок в CodePen, нажмите на глазные яблоки, чтобы просмотреть любой скомпилированный код. Я использовал Джейд и SCSS здесь. Страница также работает Normalize.css)

С помощью этого метода нам нужно только одно Event.stopPropagation(), чтобы остановить подобные события от пузырьков от модального до его контейнера. Щелчок в любом месте контейнера модала закроет модальную форму, а также небольшая кнопка закрытия. Вы можете расширить это в соответствии с вашими потребностями, ключ - модальный, никогда не должен пузыриться в его контейнере.

JS

var open = $('.modal-open'), 
     close = $('.modal-close'), 
     modal = $('.modal'), 
     container = $('.modal-container'); 

    function openModal (e) { 
    container.addClass('active'); 
    } 

    function closeModal (e) { 
    container.removeClass('active'); 
    } 

    open.on('mouseup', openModal); 

    close.on('mouseup', closeModal); 
    container.on('mouseup', closeModal); 

    modal.on('mouseup', function (e) { 
    e.stopPropagation(); 
    }); 

(Имейте в виду, некоторые из этих вещей является IE9 +.Обязательно проверьте совместимость браузера, если у вас есть устаревшие потребности.)

Answer 2

теперь я понимаю немного больше того, что

$('element').click(function (e) { 
    e.stopPropagation(); 
}); 

для. Это используется для не выполняет функцию щелчка целевого элемента. Мне нужно сделать еще немного чтения об этом, но я решил проблему, используя этот код для таргетинга div.modal-window-content.