JavaScript：如何在等待ajax响应时阻止整个屏幕

我有一个屏幕，其中有不同的功能。更改时会出现一个下拉框，其中会出现一个Ajax调用，并返回一个jsp页面作为响应。然后我将这个响应放在下拉框下方的div中。 现在我想要的是，在div元素中没有填充这个jsp之前，屏幕会被一个警报框或其他对话框阻塞。

---

如何实现这一点？

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

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

---

如果确实要阻止UI，只需同步AJAX请求。

您可以使用div，以及z索引、不透明度和光标样式。虽然我不了解您的应用程序，但阻止整个页面对我来说并不是一种很好的用户体验。也许您可以仅将div放置在页面的受影响区域上，只需使用布尔标志，在设置该标志之前（在接收内容时），您将锁定该功能。一旦设置了此标志，请继续。假设你能控制这些功能。

@linusunis-fed

如果你想阻止用户点击任何东西，我建议覆盖一个div元素&可能是半透明的。下面是div&jQuery代码的CSS，用于设置显示屏幕覆盖和删除屏幕覆盖的动画。当你打电话时只需呼叫“阻塞屏幕”&“解除阻塞屏幕”在你收到数据并将新div放在页面上后即可。这是我的想法，所以你可能需要仔细检查错误，但它看起来不错

您需要在页面上包含jQuery，才能使其正常工作。请在此处下载：

.布洛克迪夫{
位置：绝对：
顶部：0px；
左：0px；
背景色：#FFF；
宽度：0px；
高度：0px；
z指数：10；
}
功能块_屏幕（）{
$（''）。附于（'正文'）；
$（'#屏幕块'）.css（{不透明度：0，宽度：$（document.width（），高度：$（document.height（）}）；
$（'#screenBlock'）.addClass（'blockDiv'）；
$（#屏幕块'）。动画（{opacity:0.7}，200）；
}
函数unblock_screen（）{
$（'#screenBlock'）。设置动画（{opacity:0}，200，function（）{
$（“#屏幕块”）.remove（）；
});
}

您得到了很多jQuery的答案，但我在这个（或之前的）问题中没有看到您使用jQuery的任何迹象。我弄错了吗？这将阻塞整个页面，用户将不知道后台正在发生什么。假设ajax调用需要5秒钟。用户应该有一些关于后台正在发生的事情的信息。通过发出同步ajax请求，您的页面将被冻结。完全同意Alex的说法。这是一个非常危险的解决方案嘿，伙计们，问题是关于阻止用户界面。请让我们将评论和投票限制在问题的上下文中。

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