单击超链接时模态未关闭答案

【问题标题】：Modal is not closing on click of Hyperlink单击超链接时模态未关闭
【发布时间】：2018-07-09 12:46:30
【问题描述】：

嗨，我正在尝试使用 jquery 做基本的正常弹出窗口，我面临的问题是当我点击第一个超链接时，它打开的弹出窗口在我点击第二个超链接（即继续按钮）时导航到不同的页面，它应该关闭模式并应在不同的选项卡中打开链接。我使用event.preventDefault() 作为第一个超链接触发器，但对于.continue 类，超链接不起作用

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

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

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

JSFiddle 链接

https://jsfiddle.net/q2smj9o3/

感谢任何帮助。谢谢

【问题讨论】：

您的HTML 中没有.modal-close

标签： jquery html modal-dialog

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/Lpkt2agz/15/

$('.external').click(function(){
    event.preventDefault();
  $('.continue').attr({'href':$(this).find('a').attr('href'),'target':'_blank'});
    $('#modal').addClass('show');
});

$('.continue').click(function() {
    $('#modal').removeClass('show');
});

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

你的代码有问题，

您将click 事件绑定在span 而不是anchor 标签上
您的HTML 中没有modal-close 类

这是我的代码版本：

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>

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

https://jsfiddle.net/mdehghani/gr8fp3bd/

【讨论】：

【解决方案3】：

您可以使用此代码来控制您的模式。这段代码有几个优点：

https://jsfiddle.net/3Lufab6t/1/

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

HTML

<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>

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

CSS

[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;
}

【讨论】：