在Javascript中灰色的"等待"页面？

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

当你显示它时,你可能想要设置overflow你body的hidden,然后回到它auto,这将阻止用户滚动,只看到部分停电.

现在我通常jquery用于show,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>

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>

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