i'm using JQuery v2.1.1 and JQuery UI v1.11.0, i'm trying to open a modal dialog inside another one, with the first (parent) dialog disabled.

In both dialog the modal properties is true, but only the background in disabled.

This is the HTML:

<div id="dialog-first" title="1st Modal">
    First Modal
    <input type="text" id="onetext"/>
</div>

<div id="dialog-second" title="2nd Modal">
    Second Modal
</div>

And the JS:

$( "#dialog-first" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

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

$("#onetext").dblclick(function() {
    $("#dialog-second").dialog("open");
});

For test, i wrote the code at: /

Using JQuery UI 1.8.23 works fine, but with the last stable release... not.

thanks in advance.

PD: Here is an example working: / but, using JQuery UI 1.8.23 and JQuery 1.6.4 (also work with 1.8.3)

PD2: i acplished a bad solution: / with a non desired result

i'm using JQuery v2.1.1 and JQuery UI v1.11.0, i'm trying to open a modal dialog inside another one, with the first (parent) dialog disabled.

In both dialog the modal properties is true, but only the background in disabled.

This is the HTML:

<div id="dialog-first" title="1st Modal">
    First Modal
    <input type="text" id="onetext"/>
</div>

<div id="dialog-second" title="2nd Modal">
    Second Modal
</div>

And the JS:

$( "#dialog-first" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

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

$("#onetext").dblclick(function() {
    $("#dialog-second").dialog("open");
});

For test, i wrote the code at: http://jsfiddle/33PQj/

Using JQuery UI 1.8.23 works fine, but with the last stable release... not.

thanks in advance.

PD: Here is an example working: http://jsfiddle/n725A/1/ but, using JQuery UI 1.8.23 and JQuery 1.6.4 (also work with 1.8.3)

PD2: i acplished a bad solution: http://jsfiddle/pj5Dg/1/ with a non desired result

• javascript
• jquery
• html
• jquery-ui

• It's been almost two years since you made the question, but I noticed I was having the same error. At least in JQuery UI v1.11.1 this bug is solved. – Pere Commented Jun 23, 2016 at 10:41

3 Answers 3

The modal: false on the second modal, and the first will still be accesible, while the background is not:

http://jsfiddle/n725A/1/

There is a fork in github with the solution, contribution of scottgonzalez (https://github./scottgonzalez/jquery-ui/mit/06e39d90a5e24c0ef1be771e962226210fdb098c).

Editing the dialog.js:

  this._position();
  this._createOverlay();
  this._moveToTop( null, true );
+
+ // Ensure the overlay is moved to the top with the dialog, but only when
+ // opening. The overlay shoudln't move after the dialog is open so that
+ // modeless dialogs opened after the modal dialog stack properly.
+ if ( this.overlay ) {
+     this.overlay.css( "z-index", this.uiDialog.css( "z-index" ) - 1 );
+ }
+
  this._show( this.uiDialog, this.options.show, function() {
  that._focusTabbable();
  that._trigger( "focus" );

The lines with '+' must be added in the code (dialog.js or jquery-ui.js).

I'm having the same problem - basically the child dialog is not being presented as modal even though the modal flag is set to true.

What I did was close the parent using the open function of the child, then re-opened the parent with the close function of the child. It is hack-o-rama, but gets the job done.

$( "#dialog-second" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
       },
    open: function (event, ui) {
        $( "#dialog-first" ).dialog("close");  // close parent
    },
    close: function (event, ui) {
        $( "#dialog-first" ).dialog("open"); // open parent
    }
}

});