JavaScript:如何在等待ajax响应时阻塞整个屏幕

JavaScript: How to block the whole screen while waiting for ajax response

本文关键字：屏幕 响应 在等待 ajax JavaScript      更新时间：2023-09-26

我有一个屏幕，其中有不同的函数。有一个下拉框，对其进行Ajax调用，并返回一个jsp页面作为响应。然后我把这个响应放在下拉框下面的div中。现在，我想要的是，在div元素中没有填充这个jsp之前，屏幕会被一个警告框或其他对话框阻塞。我怎样才能做到这一点？

您可以从这里使用blockui jquery插件。在进行ajax调用之前调用blockUI，并在ajax回调中取消阻塞UI。

@linusunis馈送，

如果你想阻止用户点击任何东西，我建议覆盖一个div元素&也许会使它变成半透明的。下面是div的CSS；jQuery代码，用于动画显示屏幕覆盖和删除屏幕覆盖。当你打电话的时候只需要叫"block_screen"&"unlock_screen"在您收到数据后&将您的新div放在页面上。这只是我的想法，所以你可能需要仔细检查错误，但它对我来说很好。

您需要在页面上包含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>

我会使用Jquery和Jquery UI。Jquery UI提供了一个模式对话框，您可以在其中放置一条加载消息，以防止用户单击屏幕上的其他地方。

http://jqueryui.com/demos/dialog/#modal

如果您真的想阻止UI，只需使AJAX请求同步即可。

只需使用布尔标志，在设置该标志之前（在接收内容时），即可锁定功能。一旦设置了此标志，请继续操作。假设您确实可以控制这些功能。

您可以使用div，以及z索引、不透明度和光标样式。虽然我不了解你的应用程序，但对我来说，屏蔽整个页面听起来并不是一种很好的用户体验。也许你可以只将div放在页面的受影响区域上

相关文章：