当灯箱内容打开时,页面内容向下移动 - jquery

时间:2012-08-02 14:45:37

标签: jquery css lightbox

点击指向我的灯箱的链接后,它会移动灯箱下方的页面内容。我把z-index放在我的灯箱的css上,但我相信这还不够。我不知道接下来我需要走哪个方向。我试图将灯箱放在页面内容的顶部。我不希望页面上的内容向下移动,我希望灯箱覆盖原始页面的内容。

我的小提琴: http://jsfiddle.net/stillb4llin/zZvLG/

我认为我需要在jquery中创建另一个函数来插入到我放置positionLightBox1()的位置; (注释掉)

我也认为我做错了CSS。我想相信我对CSS很有把握,但我相信你不会![/ p>

  

使用jquery的经验:我已经玩了几个星期的jquery   (编辑代码并让它适合我)我已经完成了一些阅读   并创造了一些小提琴。现在我感到很舒服   足以在我的一些经验和一些经验的帮助下创建这个   堆栈溢出答案。

感谢您的评论。

5 个答案:

答案 0 :(得分:2)

只需在#lightBoxContent而不是position:relative

上设置position:absolute

http://jsfiddle.net/zZvLG/9/

...这会从“流程”中移除灯箱,并防止其进一步向下推动其他页面内容。

答案 1 :(得分:1)

<div ID="lightBoxDiv"></div>为什么打开后立即关闭它?我猜你是否要在关闭lightBoxContent div后关闭?

答案 2 :(得分:1)

lightBoxContent必须还有position:absolute才能正常运行

答案 3 :(得分:1)

只需将lightboxdiv声明末尾的标记移动到关闭lightboxcontentdiv之后。您可能需要调整一下,但不会移动文本。

http://jsfiddle.net/MrMiracle/zZvLG/16/

答案 4 :(得分:0)

可能会修复它:http://jsfiddle.net/zZvLG/14/