Question

I have the following Problem:

I have already opened a JQuery dialog and I want to overlay it with another modal dialog to cover this and display some other functions/information.

I fill the second dialog with data fetched by an ajax request.
The problem is, that the second dialog does not open modal at first click. When I close it, and reopen it, the dialog is modal.

My code looks like follows:
I create the dialog in a that already exists in the body

function showMachineControlDialog(id)
{       
    loadMachineControlDialog(id);

    var buttonsOpts = {};
    buttonsOpts["Close"] = function() { $(this).dialog("close"); };
    $("#machine_control_box").dialog({ buttons : buttonsOpts });
    $("#machine_control_box").dialog({  width: 250, resizable: false });
    $("#machine_control_box").dialog( "option", "title", "Control-Dialog" );
    $("#machine_control_box").dialog({ zIndex: 2000 });
    $("#machine_control_box").dialog({ closeOnEscape: true });
    $("#machine_control_box").dialog({ modal: true });
    $("#machine_control_box").dialog({ autoOpen: false });
}

Here i fetch the data that is pushed into the dialog box:

function loadMachineControlDialog(id)
{   
    var paramlist = "id="+id;
    $.ajax({
         type: "GET",
         dataType: "html",
         url: "getData",
         data: paramlist,
         contentType: "application/x-www-form-urlencoded;charset=UTF-8",
         cache: false,
         success: function(data){
             $("#machine_control_box").html(data).dialog("open");
             $("#machine_control_box").dialog({ position : 'center' });
         },
             error: function(data){
             showErrorDialog(data.responseText);
         }
     });
}

I found the fix myself after some search. I have to set the modal attribute BEFORE any HTML is inserted into the dialog. If modal is set after that it won’t work for some reason.

Answer 1

You setup the dialog to be modal after you open it for the first time, eg after the loadMachineControlDialog(id); gets called.

Also, you should chain your .dialog options like this, and call loadMachineControlDialog() after

 $("#machine_control_box").dialog({ 
   buttons : buttonsOpts,
   width: 250, 
   resizable: false
   "option", "title", "Control-Dialog" 
   zIndex: 2000;
   closeOnEscape: true 
   modal: true 
   autoOpen: false });

 loadMachineControlDialog(id);