Skip to main content

Search and Top Navigation

#5466 closed bug (fixed)

Opened March 31, 2010 10:03PM UTC

Closed October 24, 2012 09:05PM UTC

Dialog: "modal" Dialog Incorrectly Cancels Input Events

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

This line of code is incorrect:

return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);

When the dialog is built from an element that has a low z-index, that line of code causes all input interactions to be canceled.

I.E. When the dialog HTML looks something like this:

<div class="modal-dialog" style="z-index: 1002">
   <div class="contents" style="z-index: 10;">
        <input type="checkbox" />
   </div>
</div>

The checkbox will not be clickable even though it is contained within the dialog.

Attachments (0)
Change History (13)

Changed March 31, 2010 10:11PM UTC by mankyd comment:1

A more specific example:

<style>
.my-popup { z-index: 10; }
</style>

<script type="text/javascript">
var popup = $('<div class="my-popup"><input id="xyz" type="checkbox" /></div>');
popup.dialog({modal:true});
</script>

The checkbox will not be clickable.

Note that if the style is inline, it works just fine.

Changed April 30, 2010 11:53PM UTC by mankyd comment:2

Note, oas of 1.8.1 this problem still exists in IE7. It does not seem to happen in other browsers.

Changed August 07, 2011 02:57PM UTC by scottgonzalez comment:3

#7608 is a duplicate of this ticket.

Changed September 07, 2011 12:47PM UTC by scottgonzalez comment:4

keywords: → modal

Changed September 15, 2011 04:46PM UTC by fgutmann comment:5

_comment0: Just stumbled upon this problem in version 1.8.16. Multiple effected browsers. At least, Chrome, Firefox and IE :-)1316105209385506
_comment1: Just stumbled upon this problem in version 1.8.16. Multiple browsers are effected. At least, Chrome, Firefox and IE :-)1316105263703668

Just stumbled upon this problem in version 1.8.16. Multiple browsers are effected. At least, Chrome, Firefox and IE :-)

I would suggest to raise priority because this is pretty nasty.

Changed September 23, 2011 09:14PM UTC by cowtownfarmboy comment:6

_comment0: I have worked on getting an application coded and up to the piont of using a modal dialog and have finaly gotten everything to function as I want it to do. Now I find this error which to my astonishment is set at a very low priority. This is unfortunate. I would suggest that the priority of this problem be revisited. \ \ Up to this point I had thought that the jQuery UI was a very good candidate for use for our department and our state. With this now found I may have to reconsider. \ \ Thank you1317145807106871
_comment1: I have worked on getting an application coded and up to the point of using a modal dialog and have finaly gotten everything to function as I want it to do. Now I find this error which to my astonishment is set at a very low priority. This is unfortunate. I would suggest that the priority of this problem be revisited and it be fixed to make the UI much more usable. \ \ Thank you1317148354205632

I have worked on getting an application coded and up to the point of using a modal dialog and have finaly gotten everything to function as I want it to do. Now got hit with this error. It was very dissappointing. The work around in the previous comments is not clear. But with just as little code you can make this work.

What you need to do is to set the values of the objects you are going to include ni the dialog box higher then the container they are carried in. In mankyd's example above set the z-index higher and the modal will work. So in the first example where there are two div's set the outside div to a z-index of x and the inside div to a z-index of x + 1 and it should work.

Thank you

Changed October 12, 2011 12:52AM UTC by mankyd comment:7

We were just bit hard by this bug again in IE7. Is there any plan for a fix? This is a nasty one.

Changed December 02, 2011 11:23PM UTC by j2jensen comment:8

We just ran into this bug, and in our case we cannot just change the z-index, since elements of the same class appear both inside and outside of our dialog, and we don't want those elements to show through the overlay when they are outside the dialog.

Thanks to mankyd's good bug description, we quickly found the source of the bug and came up with this fix (version 1.8.14). Change the following code:

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) {
	return false;
}

... to this:

if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ &&
    $(event.target).closest('.ui-dialog').zIndex() < $.ui.dialog.overlay.maxZ) {
	return false;
}

This makes the dialog continue to block events on items with a z-index lower than the topmost overlay, *but only if they are not a child element of a dialog which is above the overlay*.

Hopefully this will help anybody who's having the same problem. I'll work on submitting a fix to GitHub shortly.

Changed December 14, 2011 11:57AM UTC by saulotoledo comment:9

I can confirm the problem and the fix suggested solved for me.

The problem was found with http://bugs.jqueryui.com/ticket/7950

Changed April 11, 2012 07:22PM UTC by may comment:10

Replying to [comment:9 saulotoledo]:

I can confirm the problem and the fix suggested solved for me. The problem was found with http://bugs.jqueryui.com/ticket/7950

Yes the fix works for FF and IE, but not for Chrome. Anypne has any suggestion?

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

milestone: TBD1.10.0

Changed October 15, 2012 09:35PM UTC by petersendidit comment:12

status: newopen
summary: "modal" Dialog Incorrectly Cancels Input EventsDialog: "modal" Dialog Incorrectly Cancels Input Events

Changed October 24, 2012 09:05PM UTC by Nate Eagle comment:13

resolution: → fixed
status: openclosed

Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets:

Fixes #3534 - Dialog: Modal dialog disables all input elements on page.

Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari.

Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall.

Fixes #5388 - Dialog: Don't change z-index when already at the top.

Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events.

Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead.

Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work.

Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle.

Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6).

Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps.

Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog.

Fixes #8583 - Dialog: Mouse event wrongly stopped.

Fixes #8722 - Dialog: Remove stack option.

Fixes #8729 - Dialog: Remove zIndex option.

Changeset: 3829a37ca122e923c3a08b964c4b1a946a2a1456