简体   繁体   中英

Jquery dialog been displayed behind div during the animation

I am not sure you guys will be able to help me only with this information but if it is not enought just ask me and I´ll provide.

I have a dialog been displayed using an animation. It is created on top of everything. I am not using any custom z-index, just the normal functionality.

It is a div that is within another dialog previoslly displayed. During the animation ("Blind"), it is display behind the dialog it is within but at the end is is displayed normally on top of this dialog.

I need to fix it showing this 'child' dialog on top of everything also during the animation.

This is the code:

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

And the html:

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

thanks.

Use $('#childDialog').dialog('moveToTop') prior to calling $('#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/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM