JavaScript：如何在等待 ajax 响应时阻塞整个屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9152416/
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
JavaScript: How to block the whole screen while waiting for ajax response
提问by linusunis fed
I have a screen in which there are different functions. There is a dropdown box onchange of which an Ajax call goes and a jsp page is returned in response. This response i then put inside a div below my dropdown box. Now what i want is that untill this jsp is not filled in the div element the screen is blocked either by an alert box or some other dialog box. How can i achieve this ?
我有一个屏幕，其中有不同的功能。有一个下拉框 onchange，其中一个 Ajax 调用进行，并返回一个 jsp 页面作为响应。然后我将此响应放在下拉框下方的 div 中。现在我想要的是，直到这个 jsp 没有填充到 div 元素中，屏幕才会被警告框或其他一些对话框挡住。我怎样才能做到这一点？
回答by Aleksandar Vucetic
回答by vero
@linusunis fed,
@linusunis 喂饱，
If you want to prevent the user from clicking on anything I suggest overlaying a div element & maybe making it semi-transparent. Below is CSS for the div & jQuery code to animate displaying the screen overlay and removing the screen overlay. Just call "block_screen" when you make your call & "unblock_screen" after you received the data & placed your new div on the page. This is just off the top of my head so you may need to double check for errors but it looks good to me.
如果你想阻止用户点击任何东西，我建议覆盖一个 div 元素并让它半透明。下面是 div 和 jQuery 代码的 CSS，用于动画显示屏幕覆盖和移除屏幕覆盖。只需在您拨打电话时调用“block_screen”并在收到数据后调用“unblock_screen”并将新的 div 放在页面上。这只是我的头顶，所以你可能需要仔细检查错误，但对我来说看起来不错。
You need to include jQuery on the page for this to work. Download it here: http://code.jquery.com/jquery-1.7.1.min.js
您需要在页面上包含 jQuery 才能使其工作。在这里下载：http: //code.jquery.com/jquery-1.7.1.min.js
<style type="text/css">
.blockDiv {
position: absolute:
top: 0px;
left: 0px;
background-color: #FFF;
width: 0px;
height: 0px;
z-index: 10;
}
</style>
<script type="text/javascript" language="javascript">
function block_screen() {
$('<div id="screenBlock"></div>').appendTo('body');
$('#screenBlock').css( { opacity: 0, width: $(document).width(), height: $(document).height() } );
$('#screenBlock').addClass('blockDiv');
$('#screenBlock').animate({opacity: 0.7}, 200);
}
function unblock_screen() {
$('#screenBlock').animate({opacity: 0}, 200, function() {
$('#screenBlock').remove();
});
}
</script>
回答by Kevin Bowersox
I would use Jquery and Jquery UI. Jquery UI provides a modal dialog in which you could place a loading message that will keep the user from clicking elsewhere on the screen.
我会使用 Jquery 和 Jquery UI。Jquery UI 提供了一个模态对话框，您可以在其中放置一条加载消息，以防止用户单击屏幕上的其他地方。
回答by Kevin Bowersox
If you actually want to block the UI, just make the AJAX request synchronous.
如果你真的想阻塞 UI，只需让 AJAX 请求同步即可。
回答by Antony Scott
you can use a div, along with z-index, opacity and cursor styling. although I don't know you application, blocking the entire page doesn't sound like a great user experience to me. perhaps you could place the div only over the affected area of the page
您可以使用 div 以及 z-index、不透明度和光标样式。虽然我不了解您的应用程序，但对我来说，阻止整个页面听起来并不是很好的用户体验。也许您可以将 div 仅放在页面的受影响区域上
回答by Johnydep
Just use a boolean flag, which until is set (on receiving content), you lock the functionality. And once this flag is set, proceed further. Assuming you do have control over those functions.
只需使用一个布尔标志，直到设置（在接收内容时），您才能锁定功能。一旦设置了这个标志，继续进行。假设您确实可以控制这些功能。
