模态框关闭时保持原位

Posted 2023-02-19

【中文标题】模态框关闭时保持原位

【英文标题】：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

【参考方案1】：

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