模态框关闭时保持原位答案

【问题标题】：Stays in position when modal box is closed模态框关闭时保持原位
【发布时间】：2021-12-21 20:59:41
【问题描述】：

我有一个弹出模式框。单击关闭按钮时，页面将滚动回窗口顶部。单击关闭按钮后如何让页面保持在原位？

这是我用于模态框的 jquery。完整的演示可以在这里找到：https://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html

$(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);
    //$(".js-modalbox").fadeIn(500);
    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>

感谢您的时间和帮助。

【问题讨论】：

你有可以“实时”检查的链接吗？
这是我正在使用的jqueryscript.net/lightbox/…
抱歉，不，我的意思是如果您可以共享一个指向您正在工作的网站的链接，并运行此代码？
谢谢@Tami！经过一番挣扎，设法使其工作。我添加了这个$('a').click(function (e) { e.preventDefault(); 并且它有效。非常感谢您愿意提供帮助的善良和耐心。
很高兴你能成功！ :D

标签： javascript html jquery css wordpress

【解决方案1】：

也许问题是因为href="#" 充当锚点并滚动到窗口顶部？

【讨论】：