Skip to main content

Search and Top Navigation

#9068 closed feature (wontfix)

Opened February 07, 2013 05:35PM UTC

Closed February 07, 2013 05:42PM UTC

Last modified February 07, 2013 06:19PM UTC

Ability to have a transparent overlay on non-focused dialogs, useful for iframe dialogs

Reported by: aNt1X Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:


it would be nice to have a transparent overlay that covers non-focused dialogs.

It is useful when you have iframe dialogs: they cannot gain focus if the user clicks the iframe, because the click event isn't handled by the dialog.

I implemented a workaround that, when the user focus a dialog, other dialogs are covered with a transparent div.

When a dialog got clicked, his overlay is removed and he gains focus.

Here the focus() event i implemented:

            focus: function () {

                var $this_dialog = $(this).dialog('widget');
                console.log($this_dialog.attr('aria-describedby') + ' focus');

                var $other_dialogs = $('.ui-dialog').not($this_dialog);

                // Add invisible overlay to other dialogs
                $other_dialogs.each(function () {

                    var $that_dialog = $(this);
                    console.log($that_dialog.attr('aria-describedby') + ' dialog found');

                    if ($that_dialog.find('div.ui-dialog-invisible-overlay').length == 0) {
                        console.log($that_dialog.attr('aria-describedby') + ' invisible overlay not found, appending');
                        $that_dialog.append($('<div class="ui-dialog-invisible-overlay" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; background-color:white;"></div>'));

                // Remove overlay on this dialog
                var $this_dialog_overlay = $this_dialog.find('div.ui-dialog-invisible-overlay');
                if ($this_dialog_overlay.length > 0) {
                    console.log($this_dialog.attr('aria-describedby') + ' invisible overlay found, removing');

The code is full of debug messages for debugging purpouses.

This is not mandatory for non-iframe dialogs, but it is necessary when you have an iframe dialog.

Attachments (0)
Change History (3)

Changed February 07, 2013 05:42PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: newclosed

The only time we'll ever cover an iframe is while the user is actively performing an action like dragging or resizing.

Changed February 07, 2013 06:03PM UTC by aNt1X comment:2

But doing so, the iframe based dialog will never get focus if the user click into the iframe content. Am i wrong?

Changed February 07, 2013 06:19PM UTC by scottgonzalez comment:3

And with the cover, you're impeding the user's ability to do what they want and expect.