How do I block from input with jQuery?

Say I display a div through using jQuery, but I want the rest of the window (everything except that div) be unaccessible for user - so all the controls are disable开发者_JAVA技巧d and the user can only do something with the controls in that special div?

---

You can build a modal dialog from your <div> element:

$("#yourDivID").dialog({ modal: true });

---

Please use jquery bock UI plugin

http://jquery.malsup.com/block/

for a simple fix , if your z-index of popup is greater than all the elements behind , you cannot touch the items behind

give z-index like 1000 or so

---

Do a search for "jquery lightbox" and you will find what you are after, or use the jquery modal dialog as mentioned in another answer.

I like lightboxes as they overlay the page with an opacity mask, clearly showing the controls are disabled/not accessible.

---

Rather than using full blown plugins for something that is so simple:

Use a second div, whose css position is fixed and whose width and height is equal to the window.innerHeight & window.innerWidth properties respectively. Set the z-index to something large, but less than the z-index of the model dialog your showing.

$('<div />').css({
    position: 'fixed',
    left: 0,
    top: 0,
    width: window.innerWidth,
    height: window.innerHeight,
    'z-index': 1000
});

As mentioned in the comments however, this does not stop the users tabbing to the hidden fields; to do that, you can bind an event to capture the tab press, and cancel it:

$(document).bind('keydown', function (event) {
    if (event.which === 9 && !$(event.target).closest('.model').length) {
        event.preventDefault();
    }
});

To give you the ability to add/ remove the event handler at will, it will be easier to do it like so:

function stopTab(event) {
    if (event.which === 9 && !$(event.target).closest('.model').length) {
        event.preventDefault();
    }
}

$(document).bind('keydown', stopTab); // to add
$(document).unbind('keydown', stopTab); // to remove

Your modal dialog must have a class of modal for this to work (or simply alter the selector).