vodkabears / Remodal

No longer actively maintained.
http://vodkabears.github.io/remodal/
MIT License
2.75k stars 771 forks source link

Stray hash after closing modal #202

Open acairns opened 8 years ago

acairns commented 8 years ago

When a model is closed, a stray hash remains in the URL.

  1. http://example.com/
  2. Open model
  3. http://example.com/#example-modal
  4. Close modal
  5. http://example.com/#

This can be easily worked around by listening for a close event an using replaceState - however I don't thing it's expected behaviour. In fact, I would expect the URL to return to what it was perviously - if the hash is already populated, the last state should return:

  1. http://example.com/#section
  2. Open model
  3. http://example.com/#example-modal
  4. Close modal
  5. http://example.com/#section
nikmauro commented 8 years ago

The same here. Any suggestion?

pugson commented 8 years ago

+1

jekeyeke commented 8 years ago

+1

jrosebr1 commented 8 years ago

+1

mistalaba commented 8 years ago

Any news on this? Cheers!

dornaweb commented 7 years ago

No suggestion?

pr0jectile commented 7 years ago

I've found a way to fix this problem.

In remodal.js find

location.hash = '';

then add the following code underneath it

history.replaceState({}, document.title, location.href.replace('#', ''));

so you should have

location.hash = ''; history.replaceState({}, document.title, location.href.replace('#', '')); $(window).scrollTop(scrollTop);

This clears # from the URL upon closing the popup via the wrapper and buttons as well as replaces the stray hash URL in the browser history buttons.

Hope this helps!

AhmedHdeawy commented 6 years ago

you can add this to Modal wrap [ data-remodal-options="hashTracking: false," ] finally, your modal will like this

<div class="remodal remodal-date" data-remodal-id="modal2" data-remodal-options="hashTracking: false,">
      <button data-remodal-action="close" class="remodal-close"></button>
      <h1>Chage Order Date</h1>
      <p>

      </p>
      <br>
      <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
      </form>
    </div>