Opened 13 years ago
Closed 10 years ago
#5466 closed bug (fixed)
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.
Change History (13)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
Note, oas of 1.8.1 this problem still exists in IE7. It does not seem to happen in other browsers.
comment:4 Changed 12 years ago by
Keywords: | modal added |
---|
comment:5 Changed 12 years ago by
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.
comment:6 Changed 12 years ago by
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
comment:7 Changed 11 years ago by
We were just bit hard by this bug again in IE7. Is there any plan for a fix? This is a nasty one.
comment:8 Changed 11 years ago by
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.
comment:9 follow-up: 10 Changed 11 years ago by
I can confirm the problem and the fix suggested solved for me. The problem was found with http://bugs.jqueryui.com/ticket/7950
comment:10 Changed 11 years ago by
Replying to 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?
comment:11 Changed 10 years ago by
Milestone: | TBD → 1.10.0 |
---|
comment:12 Changed 10 years ago by
Status: | new → open |
---|---|
Summary: | "modal" Dialog Incorrectly Cancels Input Events → Dialog: "modal" Dialog Incorrectly Cancels Input Events |
comment:13 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
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
A more specific example:
The checkbox will not be clickable.
Note that if the style is inline, it works just fine.