Fancybox 2在加载后更改z-index

使用fancybox 2的im - 在加载后，我想在单击按钮时使多个div“出现”。出现的意思是将z-index改为8030以上（这是fancybox的默认值）。但它没有按预期工作。我看到z-index被应用 - 但它仍然在黑色覆盖之后。Fancybox 2在加载后更改z-index

编辑：这里是的jsfiddle：http://jsfiddle.net/Z8dWa/17/

解决方案：位置：相对于

定制CSS：

.inline_div{ 
    display:none; 
} 
.first{ 
    z-index:1; 
    position:fixed: 
     top:1; 
    left:1; 
    display:block; 
    width:200px; 
    height:100px; 
    background:#ccc; 
} 
#m_help{ 
    z-index:2; 
    position:relative; 
    background:white; 
    color:#888; 
    width:100%; 
    display: block; 
    padding:10px 0 10px 10px; 
    margin:5px 0 5px; 
}

HTML：

<div class="first"> 
    <a href="#help_overlay" class="inline_helper" id="m_help">Show Box</a> 
    <div id="help_overlay" class="inline_div"> 
     <h1>It works!</h1> 
    </div> 
</div>

的fancybox：

$(".inline_helper").fancybox({ 
    maxWidth : 500, 
    maxHeight : 500, 
    autoSize : true, 
    closeClick : false, 
    scrolling : false, 
    openEffect : 'elastic', 
    openSpeed : 150, 

    closeEffect : 'elastic', 
    closeSpeed : 150 

});

按钮点击：

$('#m_help').click(function(){ 
    $('#m_help').css('z-index','8050'); 
});

我怎么错过？

来源

2013-04-03 l4ci

将position:relative添加到#m_help解决它。

http://jsfiddle.net/Z8dWa/17/

来源

2013-04-03 08:19:01 l4ci

添加一些更多的价值，如：

$('#m_help').click(function(){ 
    $('#m_help').css('z-index','10000'); 
});

也请使用萤火虫，让您的DIV可见检查的z-index。

来源

2013-04-03 07:41:11 Gerry

已经试过了 - 不事关多么高或低的z-index，它始终是黑色层后面。 – l4ci

你可以隐藏黑色overlay.inspect该图层并使用它的类隐藏它等。 – Gerry

我添加了一个jsfiddle并更新了代码 - 它似乎与父级的css有关。它没有它的作品。 – l4ci

http://jsfiddle.net/Z8dWa/16/

改变了#m_help到position:fixed。那么它的作品...需要一些美化，但它的作品。

来源

2013-04-03 07:45:36

是的，这正是我想要实现的。点击后让LINK照亮叠加层。 – l4ci

Fancybox 2在加载后更改z-index

回答

相关问题