Try this instead $(document).ready(function() { $(“#divDialog”).dialog(opt).dialog(“open”); }); You can also do: var theDialog = $(“#divDialog”).dialog(opt); theDialog.dialog(“open”); That’s because the dialog is not stored in $(‘#divDialog’), but on a new div that is created on the fly and returned by the .dialog(opt) function.
Sorry to drag this up after so long but I used the below. Any disadvantages? See the open function… $(“#popup”).dialog( { height: 670, width: 680, modal: true, autoOpen: false, close: function(event, ui) { $(‘#wrap’).show(); }, open: function(event, ui) { $(‘.ui-widget-overlay’).bind(‘click’, function() { $(“#popup”).dialog(‘close’); }); } });
Update: As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use: width: ‘auto’ Use the autoResize:true option. I’ll illustrate: <div id=”whatup”> <div id=”inside”>Hi there.</div> </div> <script> $(‘#whatup’).dialog( “resize”, “auto” ); $(‘#whatup’).dialog(); setTimeout(function() { $(‘#inside’).append(“Hello!<br>”); setTimeout(arguments.callee, 1000); }, 1000); </script> Here’s a working example: http://jsbin.com/ubowa
I’ve just wrote a tiny sample app using JQuery 1.4.1 and UI 1.8rc1. All I did was specify the constructor as: var theDialog = $(“.mydialog”).dialog({ autoOpen: false, resizable: false, modal: true, width:’auto’ }); I know you said that this makes it take up 100% width of the browser window but it works sweet here, tested … Read more
$(this).dialog(‘destroy’).remove() This will destroy the dialog and then remove the div that was “hosting” the dialog completely from the DOM
Looks like anyone, even in this linked question, have proposed this solution, similar to the first part of the answer given by Nick Craver: $(“#dialog”).dialog({ width: 480, height: “auto”, buttons: [ { id: “button-cancel”, text: “Cancel”, click: function() { $(this).dialog(“close”); } }, { id: “button-ok”, text: “Ok”, click: function() { $(this).dialog(“close”); } } ] }); … Read more
I have found it! You can catch the close event using the following code: $(‘div#popup_content’).on(‘dialogclose’, function(event) { alert(‘closed’); }); Obviously I can replace the alert with whatever I need to do. Edit: As of Jquery 1.7, the bind() has become on()
I am late to this one by a while, but I’m going to blow your mind, ready? The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in. Literally, swap the two so that instead of: <script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script> <script src=”https://stackoverflow.com/questions/17367736/js/bootstrap.min.js”></script> it becomes <script src=”https://stackoverflow.com/questions/17367736/js/bootstrap.min.js”></script> <script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script> 🙂 Edit … Read more
I have found this worked in the end (note the third line overriding the open function which find the button and hides it): $(“#div2”).dialog({ closeOnEscape: false, open: function(event, ui) { $(“.ui-dialog-titlebar-close”, ui.dialog || ui).hide(); } }); To hide the close button on all dialogs you can use the following CSS too: .ui-dialog-titlebar-close { visibility: hidden; … Read more