Dialog: Closing UI dialog when z-index is not defined in any .ui-dialog class, causes NaN to be used as Z-index, throwing an error

In what case do you not have a z-index defined?

Replying to [comment:1 scott.gonzalez]:

In what case do you not have a z-index defined?

When using the default theme of jquery, downloaded @ http://jqueryui.com/download, jquery-ui-1.8.4.custom.css, i get this problem. The .ui-dialog class needs to have a z-index defined before everything works for me. Looking at the original code, it looks like the author intended to have a default 0 value. This is however comprimised by any NaN values ...

There's a zIndex option which defaults to 1000 which sets the z-index of the dialog on creation.

Replying to [comment:3 scott.gonzalez]:

There's a zIndex option which defaults to 1000 which sets the z-index of the dialog on creation.

True, However somehow IE8 returns a NaN instead of the default. With this minor change everything works for me. Without it, i get a Invalid Argument exception because an earlier called 'close' set the z-index to NaN. Even if i set the z-index with while creating the dialog.

Btw, this only happens with the modal option set to true. I forgot to mention that. It also works fine in Firefox. Firefox seems to handle the NaN problem differently.

Ex:

$('#boolInput').dialog({ buttons: { "No": function() 
				{ 
					$(this).dialog("close"); 
					alert("No");
				
				
				}, "Yes": function() 
				{ 
					$(this).dialog("close"); 
					alert("Yes");
			
				}},
				width: 400,
				height: 400,
				minWidth: 400,
				minHeight: 400,
				modal: true,
				title: 'Confirm',
				autoOpen: false
				
				
				});

// ..

//(Re)-Open the window
$('#boolInput').dialog( "open" );

Replying to [comment:1 scott.gonzalez]:

In what case do you not have a z-index defined?

I discovered some code like this in our application: <div id="my-dialog" class="ui-dialog"></div>. The z-index of this div is auto because $('#my-dialog').dialog() has not been called yet. In this case the problem is solved by simply removing the incorrect class="ui-dialog" attribute.

So in our case this is ''not'' a bug in jQuery. However, it seems other people have had this problem (#4652). Perhaps to prevent people having this problem in future this code from jquery.ui.dialog.js:

$('.ui-dialog').each(function() {
  if (this !== self.uiDialog[0]) {
    maxZ = Math.max(maxZ, $(this).css('z-index'));
  }
});

should be changed to ignore auto elements?

$('.ui-dialog').each(function() {
  var zIndex = $(this).css('z-index');
  if (this !== self.uiDialog[0] && zIndex != "auto") {
    maxZ = Math.max(maxZ, zIndex);
  }
});

I've tried to make a correction to the source. Haven't done this before and there are a lot of hoops to jump through. Hopefully it will take.

https://github.com/jquery/jquery-ui/pull/43

Fixed in 8bb412dd4a09d66d0f4a5456410a647e3db38bcc.