Question

我遇到一个问题：如果将模式包装在标签中，则不会触发模式。在我的示例中，如果单击链接的“常规”字体样式部分，则会正确触发，如果单击斜体的位置，则不会触发。

有什么想法吗？

JS

$(function () {
  const openModals = [];
  $('.modal-button').click(e => {
    e.preventDefault();
    $(e.target).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.target).attr('href')).show());
  });
  $(window).add('.close').click(e => {
    e.stopPropagation();
    if ($(e.target).is('.modal, .close')) {
      const closing = openModals.pop().addClass('modal-content-active');
      setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0);
      if (openModals.length > 0) {
        openModals[openModals.length - 1].removeClass('open');
      } else $('body').removeClass('open');
    }
  });
});

FIDDLE

Answer 1

在第一个事件处理程序中，您引用的是“目标”而不是“ currentTarget”

e.target代表被单击的确切元素-在您的情况下为<em/>-而e.currentTarget代表元素事件处理程序附加到，即您的href值在哪里。

我将第一个事件处理程序中对e.target的两个引用更改为e.currentTarget，事情应该按预期进行。

  $('.modal-button').click(e => {
    e.preventDefault();
    $(e.currentTarget).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.currentTarget).attr('href')).show());
  });

https://jsfiddle.net/q7o6f9su/

Answer 2

https://jsfiddle.net/qLpcfx8k/ 您只需要向标签传递相同的href并感到高兴：）

<a href="#myModal1" class="modal-button">This is the trigger <em href="#myModal1"> for the first modal</em></a><br>
<a href="#myModal3" class="modal-button">This is the trigger <em href="#myModal1"> for the second modal</em></a>

如果包装在<em>标签中，则触发链接

2 个答案: