Remodal icon indicating copy to clipboard operation
Remodal copied to clipboard

Stray hash after closing modal

Open acairns opened this issue 9 years ago • 8 comments

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

acairns avatar Dec 01 '15 13:12 acairns

The same here. Any suggestion?

nikmauro avatar Feb 11 '16 12:02 nikmauro

+1

pugson avatar Feb 22 '16 16:02 pugson

+1

jekeyeke avatar Mar 23 '16 12:03 jekeyeke

+1

jrosebr1 avatar Apr 28 '16 19:04 jrosebr1

Any news on this? Cheers!

mistalaba avatar Sep 22 '16 00:09 mistalaba

No suggestion?

dornaweb avatar Dec 30 '16 21:12 dornaweb

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!

pr0jectile avatar Sep 08 '17 11:09 pr0jectile

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>

AhmedHdeawy avatar Jan 21 '18 07:01 AhmedHdeawy