javascript - 动画期间在 div 后面显示 Jquery 对话框

Question

我不确定你们能否仅通过这些信息帮助我，但如果还不够，请询问我，我会提供。

我有一个使用动画显示的对话框。它是在一切之上创建的。我没有使用任何自定义 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>

谢谢。

Answer 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/