我有一个包含一长串产品的网页。每个产品旁边都有一个链接，用于查看有关该产品的详细信息。详细信息显示在模式窗口中。 目标是获得与在 Facebook 上查看图片时相同的行为:
- 模态窗口显示在距顶部约 50 像素处
- 如果模态窗口高度大于视口(viewport)高度，用户无法向下滚动(滚动条现在朝向模态窗口而不是后台页面)
- 当模式窗口关闭时，用户在产品列表中的位置与打开模式窗口之前相同。
我快到了，期待最后一个要求。我实现它的方法是简单地用 JS 打开模态窗口，然后使用:
var winH = window.pageYOffset + 50
$('#show_message_overlay').css('top', winH+"px");
定位模态窗口。
欢迎提出更好的方法。
感谢您的帮助。
最佳答案
结果证明解决方案比我想象的要复杂:
- 在与主体元素具有相同宽度和高度的 div 中创建模态窗口
- 在显示模态窗口之前存储滚动偏移
- 用 JS 显示模态窗口(注意模态窗口 div 现在覆盖了所有视口(viewport))
- 使用 JS 将 body 元素的滚动 css 值设置为隐藏(这将从页面中删除滚动条)
- 设置包含要滚动的模态窗口的元素的溢出值(这可以在 css 文件中完成)，如果模型窗口大于视口(viewport)，这现在将创建滚动条
- 享受您超赞的模态窗口和滚动条吧!
- 一旦窗口关闭，使用 JS 重置滚动偏移量
关于javascript - 定位模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6170208/