Jquery Modal在单击超链接时未关闭

您好，我正在尝试使用jquery进行基本的正常弹出，我面临的问题是，当我单击第一个超链接时，其打开的弹出窗口将导航到不同的页面。当我单击第二个超链接（即“继续”按钮）时，其应关闭模式，并应在不同的选项卡中打开链接。我对第一个超链接触发器使用了

event.preventDefault（）

，但对

类使用了该超链接。continue

类超链接不起作用

js

JSFIDLE链路

---

感谢您的帮助。谢谢

给你一个解决方案

---

希望这能对您有所帮助。

您的代码中有一些问题

您在

span

上绑定

单击
事件，而不是
anchor
标记

您的

HTML

以下是我的代码版本：

HTML

<a class="external" href="https://yahoo.com">Modal</a>
<div id="modal">
  <a class="modal-close">Close</a>
  <a class="continue">Continue</a>
</div>

<a data-modallink="mymodal1" href="https://www.google.com">Modal 1</a>
<div data-modal="mymodal1">
    <a class="js-close">Close</a>
    <a class="js-continue">Continue</a>
</div>

<a data-modallink="mymodal2" href="https://www.yahoo.com">Modal 2</a>
<div data-modal="mymodal2">
    <a class="js-close">Close</a>
    <a class="js-continue">Continue</a>
</div>

---

您可以使用此代码控制模态。此代码有以下几个优点：

• 支持多模态
• 使用最佳实践并针对前缀为“js”的css
• 将所有JS保存在一个事件绑定中
• 使CSS保持足够的动态性，您不必为页面上的新模态编写新的CSS

HTML

<a class="external" href="https://yahoo.com">Modal</a>
<div id="modal">
  <a class="modal-close">Close</a>
  <a class="continue">Continue</a>
</div>

<a data-modallink="mymodal1" href="https://www.google.com">Modal 1</a>
<div data-modal="mymodal1">
    <a class="js-close">Close</a>
    <a class="js-continue">Continue</a>
</div>

<a data-modallink="mymodal2" href="https://www.yahoo.com">Modal 2</a>
<div data-modal="mymodal2">
    <a class="js-close">Close</a>
    <a class="js-continue">Continue</a>
</div>

CSS

function triggerModal(event) {
    event.preventDefault();
    $('.continue').attr({'href':$(this).attr('href'),'target':'_blank'});

    if($(this).hasClass('external')){
        $('#modal, .content').addClass('show');
    }else{
        $('#modal, .content').removeClass('show');
    }
}

$('.modal-close, .external').on('click', triggerModal); 

function triggerModal(event) {
  event.preventDefault();

  // Save variables
  var link = $(this);
  var linkId = link.attr("data-modallink");
  var modalSelector = "[data-modal='" + linkId + "']";
  var continueBtn = $(modalSelector + " .js-continue");
  var closeBtn = $(modalSelector + " .js-close");

  // Update link on continue button
  continueBtn.attr("href", link.attr("href"));
  continueBtn.attr("target", "_blank");

  // Toggle modal css
  $(modalSelector).toggleClass("show");

  // Hide modal under these events
  function hide() {
    $(modalSelector).removeClass("show");
  }
  continueBtn.on("click", hide);
  closeBtn.on("click", hide);
}

$("[data-modallink]").each(function(index, element) {
  $(element).on("click", triggerModal);
});

[data-modal] {
  display: none;
}

[data-modal].show {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

[data-modal] a {
  color: #fff;
}

---

您的

HTML

@MehdiDehghani中没有

.modal close

，即使在这样做之后，我的modal也会关闭，但超链接不会在新选项卡中打开（即，当单击“继续”时，它应该在新选项卡中打开yahoo站点）。