0

I have a button on a page that, when clicked, loads another html file into a div in a "modal". For whatever reason, when I close the modal, the page seems to refresh and go back to the top.

function openNewWindow() {
   $('.button').click(function(e) {
      e.preventDefault();
      $('body').addClass("noscroll");
      $('#wrap').load('index.html');
      return false;
   });
}

openNewWindow();

$('.close-btn').click(function(e) {
    e.preventDefault();
    $("#wrap").empty();
    $('body').removeClass("noscroll");
});

I have the preventDefault in place, but the "reload" seems to keep happening. Any issues with the script, and reason why this would be happening?

Link to my test page: http://andyrichardson.design/ajax/test.html

user3817083
  • 79
  • 1
  • 7
  • I don't think the page is reloading - if I recall, switching an element to "overflow:hidden", then back to "overflow: auto" loses it's scroll position so it's effectively reset to 0. Maybe you just need to remember the scroll position and reapply it when closing the modal. – Starscream1984 Mar 08 '16 at 17:27
  • 1
    you need to know the difference between `return false;` and `e.preventDefault();`, `return false` stops further execution completely, but `e.preventDefault();` stops current element's default habitat, check this out.http://stackoverflow.com/questions/2017755/whats-the-difference-between-e-preventdefault-and-return-false – ameenulla0007 Mar 08 '16 at 17:30
  • Creating the fixed modal overtop of the page isn't the issue, it seems it's the loading of the separate html document that creates the refresh. While perhaps the page isn't fully refreshing, it does do something to cause it to go back to the top of the page. Seems like return false; would be a better solution? – user3817083 Mar 08 '16 at 18:40

0 Answers0