Question

我是JavaScript的新手。我使用Outsystems技术开发了一个应用程序，在那里我向用户显示一个弹出窗口，一旦用户填写信息，用户点击“保存”按钮。现在我需要禁用所有页面内容，因为它需要很长时间才能保存，在这之间用户可以点击其他任何内容。

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

任何提示？

感谢。

Answer 1

只需添加一个完整的固定位置叠加层，上面写着“正在保存...请稍候”。在上面。你甚至可以把它变成半透明的灰色。

Answer 2

绝对死简单的方法是jQueryUI modal dialog.你可以用几行代码实现一个，加上一些HTML标记并包括库：

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

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

Answer 3

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

（在本例中为jQuery）

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

但同样地，这不会阻止在另一个标签中做某事，或者离开页面或者刷新它。

Answer 4

您可以做一些非常简单的事情，例如在页面顶部应用透明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);

Answer 5

如果你使用jQuery（demo）：

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');

使用JavaScript锁定页面上的任何操作

5 个答案: