Opened 13 years ago

Closed 11 years ago

#7107 closed bug (fixed)

Dialog: Modal dialog event loss with high zindex child elements (FF 3.6)

Reported by: zbapoc Owned by: zbapoc
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.10
Keywords: modal Cc:
Blocked by: Blocking:

Description

Scenario:

A file input element exists within a modal dialog and is styled for the transparency trick (effectively replace the ugly browse button).

position: absolute; z-index: 2147483583 (css maximum supported)

In FF3, the problem is that clicking the browse button causes the event to be swallowed so the browse dialog is never displayed. Everything works fine in IE8, but I have not checked other browsers.

Possible Resolution:

After a couple hours of tracking this down, I found where the issue is occurring. In jquery.ui.core.js, line 108 (inside the zIndex() function), the following code parses an incorrect value for large z-indices:

value = parseInt( elem.css( "zIndex" ), 10 );

The reason for this is that elem.css('zIndex') returns '2.14+e9', which gets evaluated to 2 after parseInt().

There are at least two possible resolutions... 1) Use parseFloat() instead. 2) Fix the .css() method to not return scientific notation. I have not dug into the css() method to determine the cause of this.

Change History (8)

comment:1 Changed 13 years ago by Scott González

Component: ui.core → ui.dialog

comment:2 Changed 12 years ago by davidmurdoch

I could not reproduce in FF 3.6.17 or FF 4.0.1 with latest (1.9pre).

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

Keywords: modal added

comment:4 Changed 12 years ago by bigorangemachine

I have Replicated this.

Firefox 6.0.2.

This is how I have it setup 9 links on a 'results' page. When a user clicks the result 'block' (thumbnail) an non-invasive script launches an ajax call and puts those results into an ajax modal-dialog and opens its.

(pardon the bad coding was trying to debug the problem before I realized it was a browser issue)

Here's the relevant parts of my code: 



jQuery(document).ready(function($) {



jQuery('.results a.diagThis').each(function(){
        jQuery(this).click(function(){
                var target_html="<div class='diagTarget'></div>";
                var diag_options={
                        dialogClass: 'customClass',
                        modal: true,
                        draggable:false,
                        resizable:false,
                        autoOpen: false,
                        minHeight: 547,
                        width: 900,
                        maxHeight: 650,
                        maxWidth: 900
                };

                // ...

                var $_this=this;
                jQuery.ajax({
                        context: jQuery($_this),
                        type: 'POST',
                        url: ajaxurl, 
                        data: ajax_data, 
                        success: function(response){
                                jQuery('.diagTarget').html(jQuery(response).find('response object response_data').text());//WORDPRESS XML
                        }
                });
        });
});



});

When the user 'clicks' any thumbnail after the first one; none of the links (or any clickable for that matter) will not work within the content area (selector '.ui-dialog-content.ui-widget-content') but you can use the close button within the title bar!

The issue specifically resides with the modal being set to true. I wasn't able to pin-point it in the source code but I was able to discover a simple work around (I don't think this will work if you are animating but try it :)).

A work around I used is to change my options from: 

                var diag_options={
                        dialogClass: 'customClass',
                        modal: true,
                        draggable:false,
                        resizable:false,
                        autoOpen: false,
                        minHeight: 547,
                        width: 900,
                        maxHeight: 650,
                        maxWidth: 900
                };

To This: 

                var diag_options={
                        beforeClose: function(){
                                jQuery('.diagTarget').dialog( "option" , 'modal' ,false );
                        },
                        dialogClass: 'customClass',
                        modal: true,
                        draggable:false,
                        resizable:false,
                        autoOpen: false,
                        minHeight: 547,
                        width: 900,
                        maxHeight: 650,
                        maxWidth: 900
                };

I added to the event handler 'beforeClose' to remove the 'modal' option setting it to false. This is jQuery UI 1.8.6, but I verified the issue was also contained within 1.8.16. Using jQuery 1.4.4

Sadly this isn't my site and I wasn't able to track down the issue in the UI source code :(

I suspect related to Bug 4800.

I believe it is related to this bug because of this line 267-278 in jquery ui dialog (ver 1.8.16): 

                if (self.options.modal) {
                        maxZ = 0;
                        $('.ui-dialog').each(function() {
                                if (this !== self.uiDialog[0]) {
                                        thisZ = $(this).css('z-index');
                                        if(!isNaN(thisZ)) {
                                                maxZ = Math.max(maxZ, thisZ);
                                        }
                                }
                        });
                        $.ui.dialog.maxZ = maxZ;
                }

I suspect the above as the troublesome lines as the issue seems to be between closing properly and being in modal mode?

Version 1, edited 12 years ago by bigorangemachine (previous) (next) (diff)

comment:5 Changed 11 years ago by Scott González

Milestone: 1.9.0 → 1.10.0

comment:6 Changed 11 years ago by bavanyo

Owner: set to zbapoc
Status: new → pending

Please attach your complete, working test case as we are having trouble recreating your issue.

comment:7 Changed 11 years ago by Jörn Zaefferer

Summary: Modal dialog event loss with high zindex child elements (FF 3.6) → Dialog: Modal dialog event loss with high zindex child elements (FF 3.6)

comment:8 Changed 11 years ago by Nate Eagle

Resolution: → fixed
Status: pending → 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

Note: See TracTickets for help on using tickets.