Blog For .NET

I’ve recently started using the jQuery UI Dialog. I think Scott G. has done an amazing job on the control, unfortunately there a few minor issues i’m having. I think they originate from a funky wrapping element around the main content, this is a problem for another post. What i needed today was a quick/easy way to hide/show <SELECT> tags when modal dialogs were being shown and hidden.

Here is a short list of my requirements:

• Only one Dialog will ever be visible at any time
• Multiple Dialog instances may live on the page at any given time
• A predefined class provides behavior cues ie6-dialog-zfix and elements in question will be decorated with ie6-dialog-zfix

The code shows the power of jQuery’s Live function. Using the live function allows the code to work on ANY dialog event, regardless of when it’s initialized. There may be a better way to do this like duck punch the dialog control but this was quick and very light.

The entire code is wrapped in lambda to provide a sort of “namespace” and help prevent variable collisions, pretty common practice in jQuery land.

// IE6 Dialog Form Element Z-Fix
(function($){

	var elements = [],
		inputSelector = ".ie6-dialog-zfix:visible";

	// Only attach the fixes in IE6
	if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
		$(".ui-dialog").live('dialogopen', function() {
			elements = $(inputSelector).css("visibility", "hidden");
		});
		$(".ui-dialog").live('dialogclose', function() {
			if(elements.length) {
				elements.css("visibility", "visible");
			}
		});
	}
})(jQuery);

The above code will set visibility: hidden on all visible elements with .ie6-dialog-zfix class when any dialog is shown, references to these elements will be cached and visibility will be set to visibile when any dialog is closed. Notice my requirements assume only one dialog will ever be active at any given time.

This code could easily be turned into a plug-in but i don't really have a need for that at the moment. I presenting an idea not a production quality solution. The main goal here is to find whats causing my overlay/ie6 issues and fix that.

Thanks for listening, please leave your feedback. If people are interested I can clean this up and provide some better examples. Maybe even make a plug-in.

1 Comment »