jQuery图像弹出和固定导航

Question

我从http://fancyapps.com/fancybox下载了Fancybox，用于在弹出窗口中打开我的图库图片。
滚动时我也使用固定导航。
我的问题是，当我点击图像时，它会在弹出窗口中打开。没关系。 但是，固定导航菜单仍然出现在弹出窗口中。        ！[问题] [1]

导航菜单HTML

<div class="nav-container">
        <div id="nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#shop">shop</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#facilities">Facilities</a></li>
                <li><a href="#terms">Terms</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul> 
           <div class="clear"></div> 
          </div>
        </div>
    </div>  

导航菜单Javascript

jQuery("document").ready(function($){

var nav = $('.nav-container');

$(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
 });
});

由于该导航，用户无法关闭弹出窗口。 伙计们， 请帮我解决这个问题。

Answer 1

您的导航菜单可能设为position: fixed。这使得它有一个z-index，默认情况下，它高于每个position:static放置的元素（这是默认值）。

你应该做的是编辑灯箱的CSS，使其具有position: relative，使其高于导航（假设它稍后在DOM中）。

如果它仍然显示在导航下方，请检查f-nav课程的z-index是什么，并更改灯箱的z-index，使其高于导航的<{1}}。< / p>