Skip to main content

Search and Top Navigation

#7474 closed bug (worksforme)

Opened June 14, 2011 08:06PM UTC

Closed October 16, 2012 02:27PM UTC

UI Modal Dialog - multiple modal dialogs don't allow keyboard input IE7 / IE6

Reported by: wo_sd Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.13
Keywords: modal Cc:
Blocked by: Blocking:
Description

We have pages that have multiple modal dialogs on them. We have a button that opens one modal dialog (called main dialog from here on out), which then has multiple buttons on it to open multiple other modal dialogs (along with numerous inputs). All dialogs are hidden on page load (as in "display: none", not calling .hide()) When we open the main dialog in IE7 / IE6, the inputs don't accept keyboard input, although you can click in them with the mouse. We traced it down to line 9710 in jquery-ui-1.8.13 that is causing the problem (this is part of the code that is blocking any input for any dialog that is not the topmost dialog):

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ)

{

return false;

}

The input (which is the event.target) is coming in with a z-index of 890, while the maxZ is 1000, which blocks the input. The code at line 9279, in the moveToTop function,

self.uiDialog.css('z-index', $.ui.dialog.maxZ);

is the only code we can find that ever sets a z-index on the dialog or its children. If we change the above code to

if ($(event.target)'''.parents('.ui-dialog').'''zIndex() < $.ui.dialog.overlay.maxZ)

{

return false;

}

then everything works correctly as the z-index is correctly set at 1001.

Attachments (0)
Change History (5)

Changed June 14, 2011 08:14PM UTC by wo_sd comment:1

I forgot to mention. We removed all CSS and all of our own JS while tracking this done and we couldn't find anything that was ever setting the z-index of the input (neither could FireBug or IE Developer Toolbar), so we don't think that we were setting the z-index of the inputs to be smaller than 1000.

Changed June 14, 2011 08:28PM UTC by wo_sd comment:2

We also understand that the potential fix would only work for properly computing the z-index for any element in a dialog, but, at least for us, we couldn't think of a scenario where we wanted a modal dialog but something outside of the modal dialog to also allow inputs.

If that functionality is desired (which by the code appears to be), the check could be changed to something akin to

if($(event.target).parents('.ui-dialog').length) {

if($(event.target).parents('.ui-dialog').zIndex() < $.ui.dialog.overlay.maxZ) {

return false;

}

}

else if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {

return false;

}

Changed September 07, 2011 12:57PM UTC by scottgonzalez comment:3

keywords: → modal

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:4

milestone: 1.9.01.10.0

Changed October 16, 2012 02:27PM UTC by drewkimrey comment:5

resolution: → worksforme
status: newclosed

I was unable to recreate this issue in the current version. Could you specify which version of jQuery core you are using as well?

http://jsbin.com/eriwaj/2/