Javascript 自制Jquery lightbox，但z-index赢了'；以后不要换回去

所以我试着在音乐会列表页面上制作一个简单的灯箱。单击列表（.performer），然后覆盖信息框（.lightboxinfo），而半透明的白色div会照亮屏幕的其余部分（#whitepage）。然后，单击屏幕上的任意位置，框和白色div消失

除了最后的z指数变化外，一切都正常。长方体和白色div变得完全透明，但是z索引显然没有改变，因为我不能点击任何链接

有人知道我做错了什么吗？非常感谢

javascript代码如下所示：

$('.performer a').click(
    function(){
        $('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
        $('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
    }); 
    $(document).click(
        function(){
            $('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
            $('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
        });
});

---

当不透明度变为0后可以设置“display:none”时，为什么还要乱用z索引呢

// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);

// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
    $('#whitepage').hide();
});

此外，每次单击performer链接时，都会向文档中添加另一个事件处理程序。您可能只想执行一次，在单击之外，并且仅当白页可见时

$('.performer a').click(function () {

});
$(document).click(function () {
    $('#whitepage:visible').animate(...
});

---

这有点难回答，因为您还没有给出HTML和CSS，但是有一些事情您可能应该看看

我想你的灯箱潜水器已经完全就位了。要显示在其上的任何（容器）元素必须相对或绝对定位，否则

z-index

将无效，相对/绝对定位的元素将始终位于其上方

您正在手动设置不透明度的动画，而不是使用jQuery内置的

fadeOut

动画。除了与不支持不透明度的浏览器兼容外，fadeOut还将隐藏元素设置为

display:none

。这使您可以单击本来在lightbox下面的内容，而只需将不透明度降低到0，元素仍然保留在那里，并且能够接受和阻止单击。（因此，使用淡出也意味着您不再需要切换z索引。）

这与您提到的问题没有直接关系，但当您单击

.performer a

链接时，您设置的两个事件都将触发。（我认为这就是为什么您阻止动画排队的原因：两个动画将一起运行，并且在最后完成时将不透明度设置为1的动画将获胜。）但是，这会阻止lightbox获得您想要的z索引。要防止这种情况发生，您需要将关闭灯箱单击事件设置为

#whitepage

或停止

$('.performer a').click(function(event)
{
        $('.lightboxinfo, #whitepage').fadeIn(500);
        event.stopPropagation();
});