Javascript 定位一个模态窗口

我有一个网页，上面有一长串的产品。每个产品旁边都有一个链接，用于查看有关该产品的详细信息。详细信息显示在模式窗口中。 我们的目标是获得与在facebook上查看图片时相同的行为体验：

• 模态窗口从顶部以约50px的速度显示
• 如果模式窗口高度大于视口高度，则用户可以向下滚动（滚动条现在指向的是模式窗口，而不是背景中的页面）
• 当模式窗口关闭时，用户在产品列表中的位置与打开模式窗口之前的位置相同

我就快到了，除了最后的要求。我实现这一点的方法是使用JS打开模式窗口，然后使用：

var winH = window.pageYOffset + 50
$('#show_message_overlay').css('top',  winH+"px");

定位模式窗口

请随意提出更好的方法

---

谢谢你的帮助

如果由于用户在模式窗口上滚动而更改了页面的滚动条，您可以在打开模式栏时保存页面滚动位置，而在关闭模式窗口时，您可以将页面滚动位置设置为您保存的位置。

解决方案比我想象的更复杂：

• 在与主体元素具有相同宽度和高度的div内创建模态窗口
• 在显示模式窗口之前存储滚动偏移
• 用JS显示模态窗口（注意模态窗口div现在覆盖所有视口）
• 使用JS将body元素的滚动css值设置为hidden（这将从页面中删除滚动条）
• 将包含模式窗口的元素的溢出值设置为滚动（这可以在css文件中完成），如果模型窗口大于视口，则现在将创建滚动条
• 享受你令人敬畏的模态窗口和滚动条
• 关闭窗口后，使用JS重置滚动偏移

---

FooHack.com上的Isaac Schlueter提供了一个非常适合您需求的CSS模式对话框示例：

从文章中：

• 在处理模式之前，不可能与父窗口的内容进行交互。滚动鼠标不应该滚动背景页面，点击不应该点击背景页面，标签不应该让你到达那里，等等
• 当您关闭模式时，父窗口应该与您离开它时的状态完全相同
• 父窗口应该变暗，或者应该有一些其他指示器，表明它当前不可用于交互。这必然会使模态“pop”更为流行
• 在网页中，模式应该约束在视口中。打开一个新窗口仅仅显示一个对话框就像一桶鼻涕虫一样难看
• 模态应一致地放置。如果不能移动，则应垂直和水平居中。如果调整或移动父窗口，则此位置应保持一致
• 模态应小于父窗口。如果视口的大小小于模式，则应显示滚动条，允许用户查看模式的其余部分

---

是的，这是一种方法，但我希望找到一种避免每次关闭模式窗口时滚动重置的方法。唯一的另一种解决方案是模式窗口的内容有一个单独的滚动条。但我认为最好是在模式窗口关闭时，将滚动条设置为打开时的前一个位置。？？？我不确定我是否得到了这个评论。