Question

我有一个模态窗口，允许用户提交表单作为号召性用语之一。但是，点击提交＆＃39;关闭模态窗口，但我不希望它。 Here is the page: infowest.com/residential-internet。

要激活模态窗口，用户单击黄橙色＆＃34;开始使用＆＃34;任何＆＃34;卡上的按钮＆＃34;互联网选项。然后，为了填写并提交表单，用户点击＆＃34;请求回拨＆＃34;按钮。实际上，来找到，点击任何地方接受＆＃34;请求回叫＆＃34;按钮关闭模态窗口，而不仅仅是单击“提交”按钮。按钮。

我尝试使用此代码：

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()和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 +。如果您有遗留需求，请务必检查浏览器兼容性。）

点击“提交”＃39;在窗体上关闭模态窗口

2 个答案: