变灰的“等待"状态Java页面吗? [英] Greyed-out "waiting" page in Javascript?

问题描述

可能重复:
以模态形式划分-javascript

Possible Duplicate:
Div as modal - javascript

有没有办法在函数调用完成之前以某种方式锁定Java页面?我想到的就像一个半透明的灰色封面，它可以防止其他任何用户操作(例如鼠标悬停或按钮单击)，直到完成当前请求为止.外观和功能并没有多大关系.

Is there a way to somehow lock a page in Javascript until a function call is complete? What I have in mind is like a semi-transparent grey cover that prevents any other user actions such as mouse-overs or button clicks until the current request is done processing. The look-and-feel doesn't matter quite as much as the functionality, though.

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

I haven't been able to find anything that does this. Most "solutions" to this problem simply say to wait to load the other HTML elements until you're done with whatever processing you're performing, but in this particular circumstance, all the options are already present on the screen. I want to be able to prevent the user from performing another action from the page until the current request is complete.

推荐答案

我倾向于使用简单的div和某些javascript来进行此类操作.

I tend to use a simple div and some javascript to do this sort of thing.

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

So for example, in your page create a div, which will function as your grey-out.

      <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*/}

然后，当您的过程即将开始时，您可以调用(显示它):

Then when your process is about to begin you can call (to show it):

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

完成后，您可以通过以下方式再次将其隐藏:

And once its done you can hide it again by:

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

在显示时，可能需要将body的overflow设置为hidden，然后再返回到auto，这将防止用户滚动并仅看到部分停电.

When you do show it, you may want to set the overflow of your body to hidden, then back to auto too, this will prevent the user scrolling and only seeing partial blackout.

现在我通常将jquery用于show和hide，尽管可以肯定上面的javascript是正确的.

Now I normally use jquery for the show and hide though am pretty sure the javascript above is correct..

更新:

如Chad所述，为了使所有内容保持整洁，最好将所有样式都放入CSS中. IE.

To keep everything much tidier, as Chad mentions, you're better off putting all styling into CSS. I.E.

  #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中删除样式. I.E

and remove the style from the DIV. I.E

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

这篇关于变灰的“等待"状态Java页面吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！