Recently I was given the task of adding a modal dialog to certain pages in our application, and I was happy to find that jQuery already had a nice solution. While it worked well and wasn’t too hard to implement, there was no obvious way to change the default height and width. I found where they were set in the CSS, overrode them in my own CSS file that gets loaded last, but still no change.
Then I decided to make the dialog non-modal and make it stick around a little longer, so I could examine the style properties in Firefox. It became apparent that the height and width were getting set in javascript, overriding whatever the CSS told it.
A little more online searching turned up this simple solution: just pass in the _undocumented_ parameters ‘height’ and ‘width’. So the final call to show the dialog looks like this:
$("#busy_submitting").dialog({
modal : true,
width : 450,
height : 150,
draggable : false,
resizable : false,
close : function(){ }
}).show();
Notice that I also passed in an empty function for the close button, to prevent the user from closing it. The main purpose of this particular dialog is to ask the user not to click the “Submit” button more than once, and make it impossible for them to do so anyway. Hope this helps someone.
Posted by sockmonk