0

我正在使用fancybox 2 - 在它被加载后，我想让几个div在单击按钮时“出现”。对于出现，我的意思是将 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

添加更多价值，例如：

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

还请使用 Firebug 检查 z-index 以使您的 div 可见。

于 2013-04-03T07:41:11.650 回答
0

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

将 #m_help 更改为position:fixed. 然后它工作......需要一些美化但它工作。

于 2013-04-03T07:45:36.413 回答
0

添加position:relative到#m_help 即可解决。

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

于 2013-04-03T08:19:01.763 回答