使用jQuery覆盖进度条

Question

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

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

Answer 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>。

Answer 2

我认为jQuery UI Modal正是您所寻找的。它覆盖屏幕的其余部分，直到用户解除对话框。您可以在对话框中添加进度条，也可以添加jQuery UI progress bar，如果您发现效果更好的话。你也可以找到很多方便的选择。

如果您希望这是一个真正的“不能做任何事情，直到完成此类”对话框，那么您也可以使用this solution取出结束“X”。

Answer 3

你看过qTip了吗？这就是我们用它的原因。