In jquery UI dialog, is it possible to put a modal

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

As sushanth reddy indicated in the comments, set the z-index of the dialog:

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

Reference: http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex

Answer 2

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.

Answer 3

You can open any number of modals and the default behavior is stacking in the order they were opened.

Demo: jsFiddle

$('#dialog-modal').dialog({
    height: 300,
    modal: true,
    buttons: {
        'Another Modal': function() {
            $('#another-dialog-modal').dialog('open');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$('#another-dialog-modal').dialog({
    autoOpen: false,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

Answer 4

Just wanted to let future finders know. It is possible to use z-index to put a modalWidget over another. I'm using jquery ui 1.10.3.

The way you go about it is, you give your dialog constructor a dialog class.

$("#secondModalDialog").dialog({
    title: 'Title',
    dialogClass: 'ModalWindowDisplayMeOnTopPlease',
    width: 200,
    height: 200
});

Then in your CSS, you specify a higher z-index than the first dialog is using.

.ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

You may need to check which one its using with firebug or some dev tool to check which z-index it was instanced with. My default z-index was 90 on the first modal Widget. The window code looked smthg like this:

<div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;">
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>