单击表单上的 'Submit' 关闭模态 window

Question

我有一个模式 window 允许用户提交表单作为号召性用语之一。但是，单击 'Submit' 会关闭模式 window 但我不希望它这样做。 Here is the page: infowest.com/residential-internet。

要激活模式 window，用户单击任何 "cards" Internet 选项上的橙黄色 "Get started" 按钮。然后要填写并提交表单，用户单击 "Request a callback" 按钮。其实，来找一下，点击ANYWHERE接受"Request a callback"按钮关闭模态window，而不只是点击'Submit'按钮。

我尝试使用此代码：

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

我现在明白了一点

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

是为了。这用于不执行目标元素的点击功能。我需要对此进行更多阅读，但我通过使用此代码定位 div.modal-window-content.

解决了这个问题

Answer 2

重要的是不要混淆 Event.stopPropagation() and 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+。如果您有遗留需求，请务必检查浏览器兼容性。）

单击表单上的 'Submit' 关闭模态 window

Clicking 'Submit' on form closes modal window

javascript

jquery

ajax

modal-dialog

contact-form