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

[mlooise]

The error (displayed in IE8) is : Invalid Argument.

This will prevent any future (re-)use of the dialog.

A check will prevent the error. Something like:

jquery-ui-1.8.4.custom.js : line 5885

if (this !== self.uiDialog[0])

{

Get the current z-index of this ui-dialog element curVal = $(this).css('z-index') Only use the current z-index if it is a number. maxZ = Math.max(maxZ, isNaN(curVal) ? maxZ : curVal);

}

[scott.gonzalez]

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

[mlooise]

Replying to 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 ...

[scott.gonzalez]

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

[mlooise]

Replying to 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.

[mlooise]

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" );

[kevin.wells.iq4bis]

Replying to 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);
  }
});

[jamiejag]

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

[scott.gonzalez]

Fixed in 8bb412dd4a09d66d0f4a5456410a647e3db38bcc.