In jquery UI dialog, is it possible to put a modal dialog on top of another modal dialog

Question

I have a modal dialog using jquery UI dialog. I now want to popup another dialog when i user changes a field in the first dialog. Both should be modal.

Is this possible as i tried putting this code there and nothing seems to popup. The following code works fine when click from a regular page (where the select control with id: selectDropdownThatICanChange) but if the same select control that i am changing is itself a dialog the dialog("Open") line does nothing. The change event fires and the open method gets called but nothing pops up.

$("#secondModalDialog").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    title: "Warning",
    width: 400,
    modal: true,
    buttons: {
        'Close': function () {
            $("#secondModalDialog").dialog('close');
        }
    }
});


$('#selectDropdownThatICanChange').live("change", function () {
    $("#secondModalDialog").dialog('open');
});

and here is the dialog (which is just a div)

<div id="secondModalDialog" style="display:none">
      This is a test <br/> This is  atest
</div>

Answer 1

UI dialogs are not singleton You can open as many dialogs as you want. And by default they are stacked. but when Dialog get focused it came up infront of other dialogs.

here is fiddle i created for you. Open dialog from first dialog

// HTML:
<div id="dialog-modal" title="Basic modal dialog">
    Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.
    <select id="dialogSelect">
        <option>123</option>
         <option>234</option>       
    </select>
</div>
<div id="another-dialog-modal" title="2nd Modal :O">
    Second Modal yayyay
</div>

// JS:
$( "#dialog-modal" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});
$("#dialogSelect").change(function(){
    $( "#another-dialog-modal" ).dialog('open');
});
$( "#another-dialog-modal" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

I've put drop down on first dialog and on change event I opened another dialog above the first dialog.