Remove #id_popup from URL when click to magnific popup

Question

I use $.magnificPopup.open() with callback method to handle the popup.

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

But when I click to button to open the popup. The hashtag #view_detail_popup will be add to URL like:

localhost/project/items/list_item#view_detail_popup

I tried to use

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

It didn't add #view_detail_popup to the link but I can't make the callback function for this. So... My question is: How can I click to open the popup without adding #view_detail_popup to URL?

score 0 · Answer 1 · answered Mar 02 '17 at 10:31

Just remove your JS and add this below code for open a modal pop only:

Java Script Code:

$(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 Code

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

Try with this one.

score 0 · Answer 2 · answered Feb 19 '18 at 00:20

You don't have to overwrite what you've done. You can use the HTML5 History API and magnific popup's callback option to run a function that clears the URL while opening or closing the popup:

$('.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
  }
})

For the above question I'd go with the open: function only.

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10. For unsupported browsers, you could always write a gracefully degrading script that makes use of it where available ¯\_(シ)_/¯ Something like this: How to remove the hash from window.location (URL) with JavaScript without page refresh?

Remove #id_popup from URL when click to magnific popup

2 Answers2