Как заблокировать вход с помощью jQuery?

Question

Скажем, я показываю div с помощью jQuery, но я хочу, чтобы остальная часть окна (все, кроме этого div) была недоступна для пользователя - поэтому все элементы управления отключены, и пользователь может делать что-то только с элементами управления в этом специальном div ?

Answer 1

Вы можете построить modal dialog от вашего <div> элемента:

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

Answer 2

Выполните поиск «Jquery лайтбокса», и вы найдете то, что вы после этого, или использовать JQuery модальное диалоговое окно, как упоминалось в другой ответ.

Мне нравятся лайтбоксы, поскольку они накладывают страницу на маску непрозрачности, четко отображая элементы управления, которые недоступны.

Answer 3

Пожалуйста, используйте JQuery Бок UI плагин

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

для простого исправления, если г-индекс всплывающего окна больше, чем все элементы позади, вы можете не трогать предметы за

отдавания г-индекс, как 1000 или около

Answer 4

Вместо того чтобы использовать полноценные плагины для чего-то, что это так просто:

Используйте второй div, чье положение css равно fixed и чьи width и height равны window.innerHeight . Установите z-index на что-то большое, но меньше, чем z-index диалогового окна модели вашего показа.

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

Как уже упоминалось в комментариях, это не мешает пользователям перемещаться по скрытым полям; чтобы сделать это, вы можете связать событие, чтобы захватить вкладку прессы, и отменить его:

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

Чтобы дать вам возможность добавлять/удалять обработчик события по собственному желанию, то это будет легче сделать это как так :

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 

Ваш модальный диалог должен иметь класс modal для этой работы (или просто изменить селектор).