7

可能重复：
Div 作为模态 - javascript

有没有办法以某种方式锁定 Javascript 中的页面，直到函数调用完成？我想到的就像一个半透明的灰色封面，它可以防止任何其他用户操作，例如鼠标悬停或按钮点击，直到当前请求完成处理。不过，外观并不像功能那么重要。

我找不到任何可以做到这一点的东西。这个问题的大多数“解决方案”只是说等待加载其他 HTML 元素，直到你完成你正在执行的任何处理，但在这种特殊情况下，所有选项都已经出现在屏幕上。我希望能够阻止用户从页面执行另一个操作，直到当前请求完成。

4

3 回答 3

13

我倾向于使用简单的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';

当您确实显示它时，您可能希望将overflow您的 设置body为hidden，然后再设置回auto，这将防止用户滚动并且只看到部分停电。

现在我通常使用jqueryandshow虽然hide我很确定javascript上面是正确的..

更新：

正如 Chad 所提到的，为了让一切都更加整洁，最好将所有样式都放入 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. IE

      <div id="blackout"></div>
于 2012-11-12T20:18:40.833 回答
6

用一个

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

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

于 2012-11-12T20:06:57.360 回答
0

交互元素有一个“禁用”属性，您可以将其设置为“禁用”以防止它们发出事件。

您可以在处理之前将其定位为“禁用”，并将它们定位回“”以在流程结束时重新启用它们。

我建议使用 jQuery 轻松选择感兴趣的元素，在处理过程中将选择器结果保存在内存中，以便在处理后使用它重新启用元素。

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

于 2012-11-12T20:05:35.207 回答