Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#9068 closed feature (wontfix)

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.

Change History (3)

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

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.

comment:2 Changed 8 years ago by aNt1X

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

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

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

Note: See TracTickets for help on using tickets.