在动画期间,在div后面显示了Jquery对话框

时间:2013-02-01 18:12:14

标签: javascript jquery jquery-ui

我不确定你们是否能够仅仅通过这些信息来帮助我,但如果不是这样,那就问我,我会提供。

我使用动画显示了一个对话框。它是在一切之上创建的。我没有使用任何自定义z-index,只是正常的功能。

这是一个div,位于另一个显示的对话框中。 在动画期间(“Blind”),它显示在它所在的对话框后面,但最后显示在该对话框的顶部。

我需要修复它在动画期间在所有内容上显示这个“子”对话框。

这是代码:

$("#childDialog").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "blind",
            duration: 1000
        },
        position: {
            my: "left top",
            at: "left bottom",
            of: "#isCertifiedAdd"
        }
    });   

和html:

<div id='parentDialog'>
    ... some html
    <div id="childDialog">
        ... more html
    </div>  
</div>

感谢。

1 个答案:

答案 0 :(得分:1)

在致电$('#childDialog').dialog('moveToTop')

之前使用$('#childDialog').dialog('show')

HTML

<div id='parentDialog'>
    <button id='button'>Open Child</button>
    <div id='parentHtml'>... parent html</div>
    <div id="childDialog">
        <div id='childHtml'>... child html</div>
    </div>
</div>

JS

$('#parentDialog').dialog({
    height: 300,
    width: 300
});

$("#childDialog").dialog({
    autoOpen: false,
    height: 300,
    width: 300,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "blind",
        duration: 1000
    },
    position: {
        my: "left top",
        at: "left bottom",
        of: "#parentHtml"
    }
});

$('#parentDialog').click(function () {
    $('#childDialog').dialog('moveToTop');
    $('#childDialog').dialog('open');
    event.stopPropagation();
});

http://jsfiddle.net/DL5w9/