Javascript jquery mobile，显示加载覆盖时禁用所有按钮

实际上我可以调用这个代码

$(":input").attr("disabled",true); //Disable all input fields

禁用我的页面上的所有按钮。但是当我的页面上有很多按钮时，我不知道性能有多好

我看到了一个技巧，我们创建了一个加载指示器覆盖，它首先是页面上的所有元素=>用户不能再点击按钮了

有没有办法重用jquerymobile的加载覆盖来归档上述技巧？我不擅长CSS，希望有人能帮我

谢谢

编辑：

最后，我使用jquery.blockUI插件实现了jquery，并按照预期工作。 我从jquery mobile添加了带有css的默认div，这样我仍然可以看到jquery mobile的加载消息和我想要的行为

文档：

显示页面加载消息，可通过$.mobile.loadingMessage配置。 例如：

隐藏页面加载消息，该消息可通过$.mobile.loadingMessage配置。 例如：

---

我刚刚发现的一个简单方法是使用带有

z-index

和

opacity

的固定背景：

添加以下CSS：

.ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

.ui-loading .ui-loader-background {
    display:block;
}

ui-loader-background

是一个自定义类，但是当显示加载微调器时，

ui-loading

由JQM添加到

元素

并在身体中添加以下元素：

<div class="ui-loader-background"> </div>

示例：

在我的例子中，我使用：

$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text: "Cargando",
textVisible: true
});

显示加载自定义消息并禁用整个页面

完成任务后，您需要：

$.mobile.loading("hide");
$("body").removeClass('ui-disabled');

---

希望帮助您

我对Xorax提供的工作解决方案进行了一个小的编辑，将加载程序背景移动到浏览器窗口的最左侧，因为我在Chrome浏览器中发现有一些区域没有完全覆盖：

.ui-loader-background {
    width:100%;
    height:100%;
    left:0;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

---

谢谢你的回答。我知道如何隐藏和显示加载消息。但我的问题是，当显示此消息时，用户仍然可以单击页面上的按钮。我只是想知道，当这个消息显示时，我们是如何有效地禁用所有按钮的。这是一个很好的技巧，但是在Android系统中，如果在集中输入字段的同时显示加载消息，则会失败。我终于完成了。在显示加载消息之前，我必须手动删除每个输入的焦点。background div可以很好地防止与页面的交互。我只是对显示进行了注释：css中没有。单击按钮后，只需按键盘上的选项卡，即使覆盖显示，也会将焦点放在所有输入元素的后面。只需在页面加载时添加注释，即可通过js:

if（！$（'.ui loader background'）.length）{$（'body'）.prepend（''；}添加该div

如果使用disable对车身进行操作，则加载元件也将被禁用。所以更好的办法是在div上添加和删除类，最后加载元素保持启用状态（从视觉上看）

$.mobile.loading("hide");
$("body").removeClass('ui-disabled');

.ui-loader-background {
    width:100%;
    height:100%;
    left:0;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}