Javascript 中的灰色“等待”页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13350663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Greyed-out "waiting" page in Javascript?
提问by asteri
Possible Duplicate:
Div as modal - javascript
可能的重复：
Div 作为模态 - javascript
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.
有没有办法以某种方式在 Javascript 中锁定页面，直到函数调用完成？我想到的就像一个半透明的灰色封面，它可以防止任何其他用户操作，例如鼠标悬停或按钮点击，直到当前请求完成处理。不过，外观并不像功能那么重要。
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 presenton the screen. I want to be able to prevent the user from performing another action from the page until the current request is complete.
我一直无法找到任何可以做到这一点的东西。这个问题的大多数“解决方案”只是说等待加载其他 HTML 元素，直到你完成你正在执行的任何处理，但在这种特殊情况下，所有选项都已经出现在屏幕上。我希望能够阻止用户从页面执行另一个操作，直到当前请求完成。
回答by Darren Wainwright
I tend to use a simple divand some javascriptto do this sort of thing.
我倾向于用一个简单的div和一些javascript来做这种事情。
So for example, in your page create a div, which will function as your grey-out.
例如，在您的页面中创建一个div，它将作为您的灰色显示。
<div id="blackout" style='background-image:url(someSemiTransparent.png); display:none;"></div>
Then style it like so:
然后像这样设置样式：
#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';
When you do show it, you may want to set the overflowof your bodyto hidden, then back to autotoo, this will prevent the user scrolling and only seeing partial blackout.
当你表现出来，你可能要设置overflow您body来hidden，再回到auto过，这将阻止用户滚动，只看到局部停电。
Now I normally use jqueryfor the showand hidethough am pretty sure the javascriptabove is correct..
现在我通常jquery用于show，hide虽然我很确定javascript以上是正确的..
Update:
更新：
To keep everything much tidier, as Chad mentions, you're better off putting all styling into CSS. I.E.
为了让一切更整洁，正如 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;}
and remove the style from the DIV. I.E
并从DIV. IE
<div id="blackout"></div>
回答by Bergi
Use a
用一个
<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>
and add/remove it or show/hide it when you are processing.
并在处理时添加/删除它或显示/隐藏它。
回答by Samuel Rossille
Interactive elements have a "disabled" attribute which you can set to "disabled" to prevent them from emitting events.
交互式元素具有“禁用”属性，您可以将其设置为“禁用”以防止它们发出事件。
You can position it to "disabled" before your processing, and position them back to "" to re-enable them at the end of your process.
您可以在处理之前将其定位为“禁用”，然后将它们定位回“”以在处理结束时重新启用它们。
I would recommend using jQuery to easily select the interesting element, keeping the selector result in memory during the process to use it to re-enable the elements after the process.
我建议使用 jQuery 轻松选择有趣的元素，在此过程中将选择器结果保留在内存中，以便在此过程后使用它重新启用元素。
That being done, you can add pretty UI elements like a glass pane to emphasize the face that your screen is disabled.
完成后，您可以添加漂亮的 UI 元素，例如玻璃窗格，以强调您的屏幕被禁用的面孔。
