0

私は fancybox 2 を使用しています - そしてそれがロードされた後、ボタンをクリックしたときにいくつかの div を「表示」したいと考えています。appear とは、z-index を 8030 (fancybox のデフォルト) を超える値に変更することを意味します。しかし、期待どおりには機能しません。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>

ファンシーボックス:

$(".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');
});

何が恋しいですか？

4

3 に答える 3

0

position:relative#m_helpに追加すると解決します。

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

于 2013-04-03T08:19:01.763 に答える
0

次のような値を追加します。

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

また、Firebug を使用して z-index を検査し、div が表示されるようにしてください。

于 2013-04-03T07:41:11.650 に答える