How do I block from input with jQuery?

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).