0

我对 JavaScript 比较陌生。我使用 Outsystems 技术开发了一个应用程序，其中我向用户展示了一个弹出窗口，一旦用户填写了信息，用户就会点击“保存”按钮。现在我需要禁用所有页面内容，因为它需要很长时间才能保存，并且用户可能会单击其他任何内容。

所以我需要使用 JavaScript 锁定页面，并显示一条消息告诉用户等待进程完成。（单击“保存”按钮）

有什么提示吗？

谢谢。

4

5 回答 5

2

只需添加一个整页固定位置覆盖，上面写着“正在保存...请稍候”。在上面。您甚至可以将其设为半透明灰色。

于 2012-09-03T05:01:26.857 回答
1

绝对简单的方法是jQueryUI 模式对话框。只需几行代码，加上一点 HTML 标记并包括库，您就可以实现一个：

$( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
});

但是，您应该注意：这与任何其他 JavaScript 解决方案一样，不会阻止恶意用户在您不希望他们与您的网站进行交互时阻止他们。唯一真正的保护措施是在用户到达您的服务器端代码时检查用户的所有输入。

于 2012-09-03T05:00:21.440 回答
0

您可以使用 JavaScript 禁用所有输入：

（在这种情况下是 jQuery）

$(':input').attr('disabled', 'disabled');

但同样，这不会停止在另一个选项卡中执行某些操作，或者导航离开页面，或者刷新它。

于 2012-09-03T05:00:07.607 回答
0

你可以做一些非常简单的事情，比如在页面顶部应用一个透明的 div。像这样说：

var overlay = $("<div style='width:100%; height: 100%; top: 0; z-index: 100; position: absolute; background: lightgray; opacity: 0.5; text-align: center; font-size: large; padding-top: 25%; font-weight: bold;'>Loading...</div>");
$("body").append(overlay);
于 2012-09-03T05:00:30.087 回答
0

如果您使用 jQuery（演示）：

CSS：

.overlay {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 999;
    background-color: #000;

    font-size: 24px;
    font-family: sans-serif;
    color: white;
    text-align: center;
}​

JavaScript：

$('<div>in process...</div>')
    .addClass('overlay')
    .fadeTo(0, 0.4)
    .appendTo('body');
​
于 2012-09-03T05:11:08.260 回答