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

89
9

У меня есть модальное окно, которое позволяет пользователям отправлять форму как один из вызовов к действию. Однако нажатие "Отправить" закрывает модальное окно, но я не хочу этого. Вот страница: 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);
});

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

спросил(а) 2021-01-26T20:33:37+03:00 4 месяца, 4 недели назад
1
Решение
108

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

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

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

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

(Если вы новичок в CodePen, щелкните глазные яблоки, чтобы просмотреть любой скомпилированный код. Я использовал Jade и 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+. Обязательно проверьте совместимость браузера, если у вас есть устаревшие потребности.)

ответил(а) 2021-01-26T20:33:37+03:00 4 месяца, 4 недели назад
45

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

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

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

ответил(а) 2021-01-26T20:33:37+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема