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

[aNt1X]

Hi,

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');
                    $this_dialog_overlay.remove();
                }
            }

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.

[Scott González]

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

[aNt1X]

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

[Scott González]

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