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>

Ichthyosaur

Think you can set the z-index value for the wrapper which you want to be shown on top.. – Stclair

Seems like the jQuery ui dialog is a "singleton", and frankly it should be. I don't think a case where dialog that opens another dialog makes a good user experience. – Columbus

need more code for test. can u provide to jsfiddle? – Calk

As of jQuery 1.7 live is depreciated, what version are you running? And, is there anything wrong with Zahid Riaz's answer? If so, what? – Aril

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.

Longtin

Answer 2

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');
        }
    }
});

Syd

Answer 3

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>

Fatling

Answer 4

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

Carleencarlen

this doesn't seem to make any difference – Ichthyosaur

You'll have to post more code then, esp. the z-index of the first dialog. – Carleencarlen

i don't have any zindex code on teh first one. I tried putting in explicit to 1000 (less than the second) but that didn't seem to change anything – Ichthyosaur