定位一个模态窗口

Question

我有一个网页，上面有一个很长的产品列表。每个产品旁边都有一个链接，可以查看该产品的详细信息，详细信息会在模态窗口中显示。

目标是实现与在Facebook上查看图片时相同的行为：

• 模态窗口距离顶部约50像素
• 如果模态窗口高度大于视口高度，则用户可以向下滚动（此时滚动条针对的是模态窗口，而不是后台的页面）
• 关闭模态窗口后，用户在产品列表中的位置与打开模态窗口前相同。

我已经接近成功，只剩下最后一个要求。我实现的方法是通过JS简单地打开模态窗口，然后使用：

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

定位模态窗口。

欢迎提出更好的方法。

感谢任何帮助。

- Matteo Melani

---

不确定我理解这个注释的意思。 - Matteo Melani

Answer 1

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

• 在一个与body元素具有相同宽度和高度的div中创建模态窗口
• 在显示模态窗口之前存储滚动偏移量
• 使用JS显示模态窗口（请注意，模态窗口div现在覆盖了整个视口）
• 使用JS将body元素的滚动css值设置为hidden（这将从页面中删除滚动条）
• 将包含模态窗口的元素的溢出值设置为scroll（可以在css文件中完成），如果模态窗口大于视口，则现在会创建滚动条
• 享受您的精美模态窗口和滚动条吧！
• 关闭窗口后，使用JS重置滚动偏移量

- Matteo Melani

Answer 2

Isaac Schlueter在FooHack.com上提供了一个很好的CSS模态对话框示例，完全符合您的要求：

http://foohack.com/2007/11/css-modal-dialog-that-works-right/

来自文章：

• 在处理模态框之前，与父窗口内容的交互应该是不可能的。滚动鼠标不应滚动背景页面，单击不应单击背景页面，切换也不应该到达那里等。
• 当您关闭模态框时，父窗口应该恢复到您离开它的状态。
• 父窗口应该变暗，或者应该有其他指示器表明它当前不可用于交互。这具有使模态框“弹出”一些的必然效果。
• 在网页中，模态框应该受到视口的限制。打开一个新窗口只是为了显示对话框是非常丑陋的。
• 模态框应该放置得一致。如果它不能移动，则应在垂直和水平方向上居中。如果父窗口被调整大小或移动，则此定位应保持一致。
• 模态框应该比父窗口小。如果视口调整为比模态框更小，则应出现滚动条，允许用户查看其余的模态框。

- Lucas Balzer

Answer 3

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

- Anze Jarni

---

是的，那是一种方法，但我希望找到一种避免每次关闭模态窗口时重置滚动条的方法。 - Matteo Melani

唯一的其他解决方案是您的模态窗口内容具有单独的滚动条。但我认为最好的方法是当模态窗口关闭时，将滚动条设置为打开时的先前位置。 - Anze Jarni