jquery - 使用宏伟的弹出插件进行灯箱覆盖时出现重叠问题

Question

我正在使用来自 http://dimsemenov.com/plugins/magnific-popup/ 的 lightbtox 叠加层在我的网站上。在该页面中有一个“灯箱画廊”示例

我在 http://37.60.251.65/~esoluti3/maximo/newseventsx.php 中使用了那个例子.我原封不动地复制了示例的源代码

问题是如果你点击一个小缩略图然后放大的图像出现在主菜单下面(它重叠并且主菜单覆盖了图片)

我该如何解决这个问题？我需要放大的图像出现在主菜单的顶部(图片覆盖主菜单而不是主菜单封面图像)

我还需要浅灰色叠加层，当单击缩略图时显示在主菜单顶部而不是在主菜单下方

我正在使用现成的布局制作我的网站，我认为布局的样式规则与灯箱叠加层冲突。站点和主菜单的 Logo 位于标题标记中。如果我删除该标签，那么灯箱覆盖将完美运行

同样在具有原始示例的网站中，当您将鼠标悬停在缩略图上时，鼠标图标将变为带有 + 的放大镜

在我的网站上，如果您将鼠标悬停在缩略图上，则会显示手指图标，而不是带有 + 的放大镜。如果您单击缩略图并且放大的图像显示该图标将变为带有 - 的放大镜

如果您将鼠标悬停在缩略图上，我需要带有 + 的放大镜才能显示在我的网站上。我该如何解决这个问题？

Answer 1

z-index有错误

在你的 css 文件中注意这个属性

header {
    background: url(../images/body-bg.png) repeat;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: box-shadow:0 0px 3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: box-shadow:0 0px 3px rgba(0, 0, 0, 0.8);
    -o-box-shadow: box-shadow:0 0px 3px rgba(0, 0, 0, 0.8);
    padding: 15px 0 0 0;
    color: #bec9d5;
    position: relative;
    z-index: 10000;
}

将您的 z-index 替换为 100

喜欢z-index: 100;

Look this

编辑

在您的 CSS 中添加这 3 个新属性

.mfp-figure button.mfp-close {
    cursor: pointer;
}
.popup-gallery a {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.mfp-figure figure {
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    cursor: zoom-out;
}

希望对您有所帮助。