JavaScript, allow the user to only focus on certain page elements?

In jQuery-UI-Dialog allows me to display a 'modal' dialog box on my web page so that the user must click an option in the dialog to proceed.

I've been writing my own dialog box code, but there is something that jQuery-UI-Dialog does that I don't know how to do yet.

I am able to display a "mask" element behind the dialog to prevent the user from clicking on elements on the page, but the user can still select elements behind the dialog using the tab key.

The jQuery-UI-Dialog seems to somehow trap the keyboard input inside the dialog box even when the tab k开发者_如何学Cey is pressed. This is very neat, but I will add that it could be abused.

What aspect of the DOM do I need to access to get this functionality?

In jQuery UI, they capture the tabs, while ignoring other keys, and limit the the tab sequence to only the tabbable elements on the dialog. See the snippet in the 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 is a namespaced event. It enables the developers to more easily identity the events, e.g. for triggering and removal. But functional wise, you can deem it as an ordinary keypress event.

Set body overflow to hidden

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

jQuery screen grey out box demo

I would like to accept William Niu's answer, but there is a flaw that prevents it from working in my web application. If the first or last element in the dialog is a radio button, then this code won't work in IE. The browser will tab to the radio button group one time.

If the selected radio button is one that the browser highlights when the user tabs to the radio button group, then this code will work. However, the selected radio button is not the one the browser highlights when the user tabs to the radio button group, then the focus will be lost from the dialog.

Here is some code I've written that solves this problem:

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

As you can see, I change William's first and last variables to groups of elements. If the first or last tabbable element in the dialog is a radio button, then it will include all radio buttons with the same name.

Otherwise, this code functions the same as William's code.