当点击到放大弹出窗口时，从URL中删除#id_popup

我使用带回调方法的$ .magnificPopup.open（）来处理弹出窗口。当点击到放大弹出窗口时，从URL中删除#id_popup

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

但是当我点击按钮打开弹出。包括hashtag #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的情况下点击打开弹出窗口？

来源

2017-02-28 TommyDo

只是删除你的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>

与尝试这个。

来源

2017-03-02 10:31:17 mageDev0688

你不必覆盖你所做的事。您可以使用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?

来源

2018-02-19 00:20:45 ztrat4dkyle

当点击到放大弹出窗口时，从URL中删除#id_popup

回答

相关问题