单击以放大弹出窗口时从 URL 中删除 #id_popup答案

【问题标题】：Remove #id_popup from URL when click to magnific popup单击以放大弹出窗口时从 URL 中删除 #id_popup
【发布时间】：2017-02-28 03:46:01
【问题描述】：

我使用带有回调方法的 $.magnificPopup.open() 来处理弹出窗口。

$.magnificPopup.open({
          type: 'inline',
          preloader: false,
          modal: true,
          items: {
              src: $('#view_detail_popup')
          },
          closeBtnInside: false,
          closeOnBgClick : false,
          enableEscapeKey: false,
          callbacks: {
           //some fucntion here
          }
        });

但是当我点击按钮打开弹出窗口时。标签 #view_detail_popup 将添加到 URL 中，例如：

localhost/project/items/list_item#view_detail_popup

我尝试使用

$('.view_detail').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#view_detail_popup',
      closeBtnInside:true,
      modal: true
    });

它没有将#view_detail_popup 添加到链接中，但我无法为此创建回调函数。所以... 我的问题是：如何在不将#view_detail_popup 添加到 URL 的情况下单击打开弹出窗口？

【问题讨论】：

标签： jquery url modal-dialog magnific-popup

【解决方案1】：

只需删除您的 JS 并添加以下代码以仅打开模式弹出窗口：

Java 脚本代码：

$(function () {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#username',
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});

HTML 代码

<a class="popup-modal" href="#test-modal">Open modal</a>

<div id="test-modal" class="white-popup-block mfp-hide">
    <h1>Modal dialog</h1>
    <p>You won't be able to dismiss this by usual means (escape or
        click button), but you can close it programatically based on
        user choices or actions.</p>
    <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>

试试这个。

【讨论】：

【解决方案2】：

您不必覆盖已完成的操作。您可以使用HTML5 History API 和magnific popup's callback option 运行在打开或关闭弹出窗口时清除 URL 的函数：

$('.popup-modal').magnificPopup({
  callbacks: {

    open: function() {
      history.pushState("", document.title, window.location.pathname);
    } // over-write URL when popup is opened

    close: function() {
      history.pushState("", document.title, window.location.pathname);
    } // over-write URL when popup is closed
  }
})

对于上述问题，我只选择open: function。

这适用于 Chrome 9、Firefox 4、Safari 5、Opera 11.50 和 IE 10。对于不受支持的浏览器，您始终可以编写一个优雅的降级脚本，在可用的地方使用它¯\_(シ)_/¯ 像这样的东西：How to remove the hash from window.location (URL) with JavaScript without page refresh?

【讨论】：