Question

假设我通过使用jQuery显示div，但我希望窗口的其余部分（除了div之外的所有内容）对用户来说是不可访问的 - 因此所有控件都被禁用，用户只能对该特殊控件执行某些操作DIV？

Answer 1

您可以从<div>元素构建modal dialog：

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

Answer 2

请使用jquery bock UI插件

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

对于一个简单的修复，如果弹出窗口的z-index大于后面的所有元素，则无法触及后面的项目

给z-index像1000左右

Answer 3

搜索＆＃34; jquery灯箱＆＃34;你会发现你所追求的，或者使用另一个答案中提到的jquery模态对话框。

我喜欢灯箱，因为它们使用不透明蒙版覆盖页面，清楚地显示控件已禁用/无法访问。

Answer 4

而不是使用完整的插件来实现这么简单的事情：

使用第二个div，其css位置为fixed且其width和height等于window.innerHeight＆amp;分别为window.innerWidth个属性。将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类才能使其工作（或只是改变选择器）。

如何使用jQuery阻止输入？

4 个答案: