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

回答

相關問題