Question

在jQuery-UI-Dialog中允许我在我的网页上显示“模态”对话框，以便用户必须单击对话框中的选项才能继续。

我一直在编写自己的对话框代码，但有些东西是jQuery-UI-Dialog所做的，我不知道该怎么做。

我能够在对话框后面显示一个“mask”元素，以防止用户点击页面上的元素，但用户仍然可以使用tab键选择对话框后面的元素。

即使按下Tab键，jQuery-UI-Dialog似乎也会以某种方式捕获对话框内的键盘输入。这非常简洁，但我会补充说它可能会被滥用。

我需要访问DOM的哪个方面才能获得此功能？

Answer 1

在jQuery UI中，它们捕获选项卡，同时忽略其他键，并将选项卡序列限制为仅对话框上的tabbable元素。请参阅original source of code of jQuery UI v1.8.5：

中的摘录

        uiDialog.bind('keypress.ui-dialog', function(event) {
            if (event.keyCode !== $.ui.keyCode.TAB) {
                return;
            }

            var tabbables = $(':tabbable', this),
                first = tabbables.filter(':first'),
                last  = tabbables.filter(':last');

            if (event.target === last[0] && !event.shiftKey) {
                first.focus(1);
                return false;
            } else if (event.target === first[0] && event.shiftKey) {
                last.focus(1);
                return false;
            }
        });

keypress.ui-dialog是namespaced event。它使开发人员能够更轻松地识别事件，例如用于触发和删除。但功能明智，您可以将其视为普通的keypress事件。

Answer 2

将身体溢出设为隐藏

$('body').css({'overflow':'hidden'});

jQuery screen grey out box demo

Answer 3

我想接受William Niu的回答，但有一个漏洞阻止它在我的网络应用程序中工作。如果对话框中的第一个或最后一个元素是单选按钮，则此代码在IE中不起作用。浏览器将选中一次单选按钮组。

如果所选单选按钮是当用户选中单选按钮组时浏览器突出显示的按钮，则此代码将起作用。但是，当用户选中单选按钮组时，所选单选按钮不是浏览器突出显示的单选按钮，然后焦点将从对话框中丢失。

以下是我编写的一些解决此问题的代码：

function _bindTabKeyForDialog(dialogId) {
    var tabbable = $('#' + dialogId).find(':tabbable');
    var firstElement = $(tabbable).filter(':first');
    var lastElement = $(tabbable).filter(':last');

    var firstGroup = (firstElement[0].type !== 'radio') ?
        firstElement :
        tabbable.filter("[name='" + firstElement[0].name + "']");
    var lastGroup = (lastElement[0].type !== 'radio') ?
        lastElement :
        tabbable.filter("[name='" + lastElement[0].name + "']");

    $(document).unbind('keydown.' + dialogId);
    $(document).bind('keydown.' + dialogId, function (e) {
        if (e.keyCode == 9) {
            if ($(e.target).is(lastGroup) && !e.shiftKey) {
                firstGroup.first().focus();
                e.preventDefault();
            }
            else if ($(e.target).is(firstGroup) && e.shiftKey) {
                lastGroup.first().focus();
                e.preventDefault();
            }
        }
    });
} // end _bindTabKeyForDialog

如您所见，我将William的first和last变量更改为元素组。如果对话框中的第一个或最后一个tabbable元素是单选按钮，则它将包含所有具有相同名称的单选按钮。

否则，此代码的功能与William的代码相同。

JavaScript，允许用户只关注某些页面元素？

3 个答案: