#InfoSec, #engr, #Startups

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.