Javascript 单击表单上的“提交”将关闭模式窗口

我有一个模式窗口，允许用户提交一个表单作为对操作的调用之一。但是，单击“提交”将关闭模式窗口，但我不希望它关闭

要激活模式窗口，用户单击任何Internet选项卡上的黄橙色“开始”按钮。然后，要填写并提交表单，用户单击请求回调按钮。事实上，点击任何地方接受请求，回调按钮关闭模式窗口，而不仅仅是点击“提交”按钮

我尝试使用以下代码：

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

阻止模式关闭，这起作用，但不允许表单提交，甚至不允许尝试提交。表单使用Ajax。这是WP联系人表单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);
});

---

我非常感谢所有的帮助！谢谢大家!

我现在对什么有了更多的了解

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

---

这是给你的。这用于不执行目标元素的单击功能。我需要对此做更多的阅读，但我通过使用此代码来针对div.modal-window-content解决了这个问题。

重要的是不要混淆和，并准确理解它们的作用

将防止事件在DOM中冒泡。通常，如果单击某个元素，其事件将尝试触发，然后父元素将尝试触发其版本的事件，依此类推。这用于在DOM上包含特定级别的事件

停止元素可能已触发的默认操作。最常见的一种是在表单上使用它来阻止表单提交。这用于取消具有特定事件的元素的默认行为

下面是一个常见模式分段技术的示例

如果您是CodePen的新手，请单击眼球查看任何已编译的代码。我在这里用过翡翠和SCS。页面也在运行

使用这种技术，我们只需要一个来阻止类似事件从模态冒泡到它的容器。单击模态容器上的任意位置将关闭模态，小的关闭按钮也将关闭模态。您可以扩展它以满足您的需要，关键是模态不应该在其容器中冒泡

JS

---

请记住，有些东西是IE9+。如果您有旧版需求，请确保检查浏览器兼容性。

我想我没有提到，可以单击被模式覆盖变暗的外部区域以关闭窗口对我来说非常重要。这就是为什么我添加了这段代码。删除它确实解决了几乎每次单击都关闭模式窗口的问题。我正试图了解如何保持这两个用户体验功能以我需要的方式运行。

  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();
  });