定位模态窗口

Question

我有一个包含很长产品列表的网页。每个产品旁边都有一个链接，可以查看有关产品的详细信息。详细信息显示在模态窗口中。 目标是获得在Facebook上查看图片时可以体验到的相同行为：

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

我几乎在那里，期待最后的要求。我实现这个的方法是简单地用JS打开模态窗口，然后使用：

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

定位模态窗口。

随意提出更好的方法。

感谢您的帮助。

Answer 1

解决方案比我想象的要复杂得多：

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

Answer 2

在FooHack.com上的Isaac Schlueter汇总了一个完全符合您要求的CSS模式对话框的一个很好的例子：

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

来自文章：

• 在处理模态之前，与父窗口内容的交互应该不可能。滚动鼠标不应滚动背景页面，点击不应该点击背景页面，标签不应该让你到那里等等。
• 当你关闭模态时，父窗口应该完全你离开它的方式。
• 父窗口应该是灰色的，或者应该有一些其他指示符，表明它当前不可用于交互。这具有使模态“流行”更多的必然结果。
• 在网页中，应在视口中约束模态。打开一个新窗口只是为了显示一个对话框是一堆丑陋的丑陋。
• 模态应该一致地放置。如果它不可移动，那么它应该垂直和水平居中。如果调整父窗口的大小或移动，则此定位应保持一致。
• 模态应小于父窗口。如果视口的大小调整小于模态，则应显示滚动条，允许用户查看模态的其余部分。

Answer 3

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