JQuery Lightbox - 将叠加层限制在特定的 div - 而不是整个页面

Question

花了好几天时间想弄清楚这一点，但也许是不可能的。

我正在使用 jquery lightbox 和一个单独的主页导航，用于多个画廊，每个画廊都有一个灯箱功能。

我想将 jquery 灯箱覆盖嵌套在一个 div 中，这样它就不会覆盖整个窗口，而只与它所在的 div 相关吗？

原因是 - 我希望无需单击叠加层即可访问主导航，并且我希望灯箱内容保持在设置的参数范围内(即页面的容器)，而不是在使用不同的屏幕分辨率时四处移动，并且因此不与主导航栏和标题对齐。

关于 jquery 脚本、插件的任何建议，如果可能的话，用于使这成为可能。或者其他建议将不胜感激。

谢谢

Answer 1

我认为您可能不得不取消 lightbox 插件提供的覆盖并自己做。

创建叠加层的过程很简单。我可以在这里重新发明轮子，或者我可以向您发送类似于此博客文章的内容:http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

看到带有 #overlay 类的覆盖 div 了吗？要使其大小适合容器，您需要做的就是将覆盖 div 放入该容器中并设置容器样式 position: relative。

您可以选择忽略该帖子在 JavaScript 端的所有实现并将其替换为您最喜欢的模态插件，但您需要绑定(bind)到模态对话框上的显示/隐藏事件以显示/隐藏您的自定义覆盖，这当然应该是可能的。但是，执行此操作的细节因您选择的插件而异。