使用 jQuery 覆盖进度条答案

【问题标题】：Overlay progress bar with jQuery使用 jQuery 覆盖进度条
【发布时间】：2011-09-08 14:00:07
【问题描述】：

我想显示一个“覆盖”页面的进度条，在它运行时禁用其他操作，有点像警报（除非您无法通过单击任何内容退出它）。在 jQuery 中执行此操作的快速方法是什么？

我已经挑选出了图像——一个动画进度条。只需要一种正确覆盖它的方法。

【问题讨论】：

【解决方案1】：

您可以轻松实现自己的叠加层。

#overlay {
  background-color: black;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0.2; /* also -moz-opacity, etc. */
  z-index: 10;
}

然后在你的页面加载时显示<div id="overlay"><img src="/path/to/your/image"/></div>，或者在你想显示它的时候显示它。

【讨论】：

这会阻止用户在显示时做其他事情吗？
会的。它显示一个覆盖整个页面的div。确保没有任何您想要覆盖的内容具有更高的z-index。此外，这只会阻止用户点击被覆盖的项目，它不能用作安全措施。

【解决方案2】：

我认为 jQuery UI Modal 是您正在寻找的。它覆盖屏幕的其余部分，直到用户关闭对话框。您可以在对话框本身内添加进度条或添加 jQuery UI progress bar，如果您发现效果更好的话。这也有很多你可能会发现方便的选项。

如果您希望这是一个真正的“什么都做不了”类型的对话框，那么您也可以使用this solution 去掉结尾的“X”。

【讨论】：

【解决方案3】：

你看过qTip吗？这就是我们使用它的目的。

【讨论】：