如何实现关闭Modal模态框后页面保持原滚动位置？

我使用了一个弹出式Modal模态框，点击关闭按钮时页面会自动滚动回窗口顶部。请问如何修改代码，实现点击关闭按钮后页面保持当前滚动位置？

以下是我当前使用的模态框jQuery代码：

$(function(){ 
  var appendthis = ("<div class='modal-overlay js-modal-close'></div>"); 
  $('a[data-modal-id]').click(function(e) { 
    e.preventDefault(); 
    $("body").append(appendthis); 
    $(".modal-overlay").fadeTo(500, 0.7); 
    var modalBox = $(this).attr('data-modal-id'); 
    $('#'+modalBox).fadeIn($(this).data()); 
  }); 
  $(".js-modal-close, .modal-overlay").click(function() { 
    $(".modal-box, .modal-overlay").fadeOut(500, function() { 
      $(".modal-overlay").remove(); 
    }); 
  }); 
  $(window).resize(function() { 
    $(".modal-box").css({ 
      top: ($(window).height() - $(".modal-box").outerHeight()) / 2, 
      left: ($(window).width() - $(".modal-box").outerWidth()) / 2 
    }); 
  }); 
  $(window).resize(); 
});

对应的HTML代码：

<div id="popup" class="modal-box" style="display:none;"> 
  <header> 
    <a href="#" class="js-modal-close close">×</a> 
    <h3>Modal Title</h3> 
  </header> 
  <div class="modal-body"> 
    <p>Modal Body</p> 
  </div> 
  <footer> 
    <a href="#" class="js-modal-close">Close Button</a> 
  </footer> 
</div>

Hey there, let's get this fixed right away! The core issue here is your close buttons use <a href="#">—when you click an anchor tag with href="#", browsers automatically scroll back to the top of the page because # targets the default top-level anchor.

Here are two simple, effective fixes:

Fix 1: Prevent the default anchor behavior in your click handler #

All you need to do is update the close button click handler to stop the browser's default scroll action. Just add the event parameter and call e.preventDefault():

$(function(){ 
  var appendthis = ("<div class='modal-overlay js-modal-close'></div>"); 
  $('a[data-modal-id]').click(function(e) { 
    e.preventDefault(); 
    $("body").append(appendthis); 
    $(".modal-overlay").fadeTo(500, 0.7); 
    var modalBox = $(this).attr('data-modal-id'); 
    $('#'+modalBox).fadeIn($(this).data()); 
  }); 
  // Updated click handler with preventDefault
  $(".js-modal-close, .modal-overlay").click(function(e) { 
    e.preventDefault(); // Stops the anchor from scrolling to top
    $(".modal-box, .modal-overlay").fadeOut(500, function() { 
      $(".modal-overlay").remove(); 
    }); 
  }); 
  $(window).resize(function() { 
    $(".modal-box").css({ 
      top: ($(window).height() - $(".modal-box").outerHeight()) / 2, 
      left: ($(window).width() - $(".modal-box").outerWidth()) / 2 
    }); 
  }); 
  $(window).resize(); 
});

Fix 2: Use semantic button elements instead of anchors #

If you don't need the anchor tag's behavior at all, swapping <a> tags for <button> elements is a better semantic choice and eliminates the scroll issue entirely (no jQuery changes needed):

<div id="popup" class="modal-box" style="display:none;"> 
  <header> 
    <button class="js-modal-close close">×</button> 
    <h3>Modal Title</h3> 
  </header> 
  <div class="modal-body"> 
    <p>Modal Body</p> 
  </div> 
  <footer> 
    <button class="js-modal-close">Close Button</button> 
  </footer> 
</div>

Either fix will keep your page at the current scroll position when closing the modal. Give them a test—they should work perfectly!

内容的提问来源于stack exchange，提问作者PlainH2O