Question

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

Answer 1

您可以使用here中的blockui jquery插件。在进行ajax调用之前调用blockUI，在ajax回调中调用unblockUI。

Answer 2

@linusunis fed，

如果你想阻止用户点击任何我建议叠加div元素和＆amp;也许是半透明的。以下是div＆amp;的CSS jQuery代码，用于动画显示屏幕叠加层和删除屏幕叠加层。拨打电话时，只需拨打“block_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>

Answer 3

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

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

Answer 4

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

Answer 5

你可以使用div，以及z-index，不透明度和光标样式。虽然我不了解你的应用程序，阻止整个页面对我来说听起来并不是一个很棒的用户体验。也许你可以只将div放在页面的受影响区域

Answer 6

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

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

6 个答案: