在 Javascript 中"waiting"页面灰显？

Question

可能的重复：
DIV为模态-JavaScript

有没有办法以某种方式锁定JavaScript中的页面，直到函数调用完成？我想到的就像半透明的灰色盖，它可以防止其他用户操作（例如鼠标浏览或按钮点击），直到当前请求完成处理为止。不过，外观与功能并不重要。

我找不到任何做到这一点的东西。对于此问题的大多数"解决方案"只需说等待加载其他HTML元素，直到完成您执行的任何处理，但是在这种特定情况下，所有选项均已已经存在屏幕。我希望能够防止用户从页面上执行其他操作，直到当前请求完成为止。

Answer 1

我倾向于使用简单的 div和一些 javascript做这种事情。

所以，例如，在您的页面中创建一个div，它将用作您的灰色。

      <div id="blackout" style='background-image:url(someSemiTransparent.png); display:none;"></div>

然后像这样样式：

      #blackout {
      width:100%;
      height:100%; /* make sure you have set parents to a height of 100% too*/
      position: absolute;
      left:0; top:0;
      z-index:10 /*just to make sure its on top*/}

然后，当您的过程即将开始时，您可以致电（显示）：

      document.getElementById('blackout').style.display = 'block';

，一旦完成，您就可以通过：

再次隐藏它

      document.getElementById('blackout').style.display = 'none';

当您显示它时，您可能需要将body的overflow设置为hidden，然后返回到auto，这将阻止用户滚动并仅看到部分停电。

现在，我通常使用jquery用于show和hide，尽管我很确定上面的javascript是正确的。

更新：

，为了使一切更加整洁，正如乍得所提到的那样，最好将所有样式纳入CSS。IE。

  #blackout {
     width:100%;
     height:100%; /* make sure you have set parents to a height of 100% too*/
     position: absolute;
     left:0; top:0;
     z-index:10 /*just to make sure its on top*/
     background-image:url(someSemiTransparent.png); 
     display:none;}

并从DIV中删除样式。即

      <div id="blackout"></div>

Answer 2

使用

<div style="position:fixed;
            z-index: 2; /* above everything else */
            top:0; left:0; bottom:0; right:0;
            background:rgba(0,0,0,.5);
"> <!-- possibly some loading-animation and/or explanation --> </div>

并在处理时添加/删除或显示/隐藏。

Answer 3

交互元素具有"禁用"属性，您可以将其设置为"禁用"以防止它们发射事件。

您可以在处理前将其定位到"禁用"，然后将它们放回"以在过程结束时重新启用它们。

我建议使用jQuery轻松选择有趣的元素，使选择器在此过程中导致内存中的内存以使用该元素在过程后重新启用元素。

完成，您可以添加漂亮的UI元素（例如玻璃窗格）来强调屏幕被禁用的脸。