CODEWITHSUNDEEP
jquery
dexter
dexter

Reputation: 7213

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 disabled and the user can only do something with the controls in that special div?

Upvotes: 4

Views: 604

Answers (4)

Matt
Matt

Reputation: 75327

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

Upvotes: 1

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263147

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

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

Upvotes: 4

kobe
kobe

Reputation: 15835

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

Upvotes: 2

Mikael Svenson
Mikael Svenson

Reputation: 39695

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.

Upvotes: 1

Related Questions