没有用户交互且无法关闭的 JavaScript 模态对话框答案

【问题标题】：JavaScript modal dialog without user interaction that can't be closed没有用户交互且无法关闭的 JavaScript 模态对话框
【发布时间】：2012-02-03 20:41:56
【问题描述】：

我有一个页面，用户可以通过单击实体名称来更新表单。想一想姓名列表，以及所有其他字段（地址、年龄、性别等）的表单，使用来自 onClick 的 AJAX 进行更新。如何创建一个模式对话框（“请稍候。”）以阻止用户交互，直到 AJAX 调用返回数据？我不希望用户能够单击“X”或“关闭”按钮。他或她必须等待！

【问题讨论】：

标签： javascript jquery ajax jquery-ui javascript-events

【解决方案1】：

看看BlockUI 插件。

它允许阻止与页面或特定元素的交互，方法是在页面或该元素的顶部添加叠加层。您可以定义一条消息并附带一系列选项来自定义外观。

例如，当执行 ajax 请求时，您可以阻止页面：

$(document).ajaxStart(function() {
    $.blockUI({
        message: '<h1>Just a moment...</h1>'
    });
}

$(document).ajaxStop(function() { $.unblockUI(); }

【讨论】：

这是一个很棒的插件，非常适合我想要的！它甚至可以阻止单个元素的输入。我在 AJAX 调用之前阻塞，并在 AJAX 回调上解除阻塞。谢谢！

【解决方案2】：

var d = document.createElement('div');
d.style.position = "fixed";
d.style.top = d.style.left = d.style.right = d.style.bottom = "0px";
document.body.appendChild(d);

这是基本的面具。之后，您可以添加更多内容，例如“请稍候”框。

【讨论】：

【解决方案3】：

您需要在页面的整个内容上放置一个 DIV。通常这是半透明的，表示用户必须等待。有时叠加层上有一个“加载”微调器。

【讨论】：