定位模式窗口

Question

我有一个包含很长产品列表的网页。每个产品旁边都有一个链接，可查看产品的详细信息。细节显示在模式窗口中。 我们的目标是让在照片在Facebook上寻找时，你可以遇到相同的行为：

• 如果模态窗口高度小于视口高度更大的显示在〜50像素从顶部
• 模态窗口用户可以向下滚动（滚动条现在朝向模式窗口而不是在后台页面）
• 当模式窗口关闭时，用户位于产品列表中的相同位置，因为它是在它打开模态窗口之前。

我快到了，期待着最后的要求。我已经实现这一点的方式是通过简单地打开与JS模态窗口，然后使用：

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

定位的模态窗口。

随意提出一个更好的方法。

感谢您的任何帮助。

Answer 1

溶液原来是比我认为更复杂：

• 创建具有相同的宽度和高度作为身体元件
• 商店滚动显示之前偏移一个div内的模态窗口模式窗口
• 用JS显示模态窗口（注意模态窗口div现在覆盖了所有的视口）
• 用JS将body元素的滚动css值设置为隐藏（这会从页面中移除滚动条）
• 设置包含要滚动的模态窗口的元素的溢出值（这可以在css文件中完成），如果模型窗口大于视口，现在将创建滚动条
• 享受您的超棒模态窗口和滚轮！
• 一旦关闭窗口重置使用JS

Answer 2

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

Answer 3

艾萨克Schlueter的超过在FooHack.com已经把一个CSS模式对话框的一个很好的例子滚动偏移恰好符合您的要求：

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

从文章：

• 与父窗口的内容互动应该是不可能直到模态被处理。滚动鼠标不应该滚动背景页面，点击不应该点击背景页面，标签不应该让你在那里，等等。
• 当你关闭模式时，父窗口应该是，正好是你如何离开它。
• 父窗口应该变暗，或者应该有一些其他指示灯，表明它当前不可用于交互。这具有使模式“弹出”更多一点的必然结果。
• 在网页中，应该在视口内约束模态。打开一个新窗口只是为了显示一个对话框，就像一桶slu u一样难看。
• 模态应该一致放置。如果它不能移动，那么它应该垂直和水平居中。如果父窗口调整大小或移动，则此定位应该一致。
• 模态应该小于父窗口。如果视口的大小小于模式的大小，那么滚动条应该出现，允许用户看到模式的其余部分。