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 mankyd

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.

comment:2 Changed 13 years ago by mankyd

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

comment:3 Changed 12 years ago by Scott González

#7608 is a duplicate of this ticket.

comment:4 Changed 12 years ago by Scott González

Keywords: modal added

comment:5 Changed 12 years ago by fgutmann

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.

Last edited 12 years ago by fgutmann (previous) (diff)

comment:6 Changed 12 years ago by cowtownfarmboy

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

Last edited 11 years ago by cowtownfarmboy (previous) (diff)

comment:7 Changed 11 years ago by mankyd

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 j2jensen

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 Changed 11 years ago by saulotoledo

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 in reply to:  9 Changed 11 years ago by may

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 Scott González

Milestone: TBD1.10.0

comment:12 Changed 10 years ago by petersendidit

Status: newopen
Summary: "modal" Dialog Incorrectly Cancels Input EventsDialog: "modal" Dialog Incorrectly Cancels Input Events

comment:13 Changed 10 years ago by Nate Eagle

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

Note: See TracTickets for help on using tickets.