Simple fix for simple problem.
I’ve recently ran into an issue where I needed different jQuery dialogs to have different widths other then the default. The issue was that different browsers had problems with solutions that used autoResize, width: auto, etc…
Since the div’s that I needed to create dialogs from already had width CSS attributes, I used the following:
First, create a “wrapper” function for your dialog creation in jQuery:
$.fn.dialogFunction=function(options){ var divId = $(this)[0].id; //Check if dialog already exists, and if so just open it //This solves the can't open same dialog twice issue. if($("#" + divId).is(':data(dialog)')){ $("#" + divId).dialog("open"); } else{ $("#" + divId).dialog({ draggable : false, resizable : true, close : function(e){ $('#dialogTrigger').focus() } ,autoOpen : false, width: $("#" + divId).css("width"), describedBy : "dialogDescription", modal : true}); $("#" + divId).dialog("open").find(":input").eq(0).focus(); } };
Now you can basically just do $(“#divId”).dialogFunction();
If you look at line 16, that will create your dialog with the css width attribute attached to the div you’re creating the modal for.