Clever Geek Handbook

JQuery-ui dialog box, "toggle" modal option not working

Possibly changing jquery ui dialog modal mode dynamically?

I made a working example: http://jsfiddle.net/LXB2Y/ and it looks like it doesn't work.

 $( this ).dialog("option","modal",false);
+3


source to share


3 answers


It looks like the dialog won't reflect the changes while it's open, but the changes will take effect. To show the changes, you can close and then immediately open the dialog. This may not be the best solution.

                $( this ).dialog("option","modal",true)
                    .dialog("close")
                    .dialog("open");


http://jsfiddle.net/9vVGz/

+5


source


If you want to change the options in a dialog box, you need to do so before opening it. Otherwise, you will need to interact with the components of the dialog, such as overlaying with your own code after opening it.

Example:



/* initialize a dialog*/
$('#dialog').dialog({autoOpen:false, modal:true});


/* open a dialog from a click handler and change options*/  
$('#myButton').click(function(){
    /* change original modal option*/                         
    $('#dialog').dialog('option', 'modal', false);
    /* change title based on text of "myButton"*/
    $('#dialog').dialog('option', 'title', $(this).text())

    /* options have been changed, open dialog now */
    $('#dialog').dialog('open');                          
});
+1


source


Still doesn't work with jQuery 1.11. You can just add the overlay manually, but if you want to go from modal to modal dialog:

$("#dialog").dialog("widget").before("<div class='ui-widget-overlay ui-front'></div>");

Remove the overlay accordingly if you want to switch from modal to modeless dialog.

0


source






More articles:


All Articles