JavaScript：如何在等待Ajax响应时屏蔽整个屏幕

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

来源

2012-02-05 linusunis fed

你得到了很多jQuery的答案，但我没有看到你使用jQuery本（或以前）的问题的迹象。我错了吗？ – 2012-02-05 20:07:02

如果你真的想阻止用户界面，只是使AJAX请求同步。

来源

2012-02-05 19:53:29

这将阻止整个页面，用户将不知道背景中正在发生什么。假设你的ajax调用需要5秒钟。用户应该有一些信息，在后台发生了一些事情。通过同步ajax请求，您的页面将被冻结。 – 2012-05-12 00:39:08

完全同意亚历克斯。这是一个非常危险的解决方案 – 2013-06-26 15:10:10

非常感谢你 – Charmie 2014-05-14 06:32:04

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

来源

2012-02-05 19:52:41

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

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

来源

2012-02-05 19:52:46

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

来源

2012-02-05 19:54:03

只需使用一个布尔标志，直到被设置（在接收内容时），你将锁定功能。一旦设置了此标志，请继续。假设你有控制这些功能。

来源

2012-02-05 19:54:46 Johnydep

@linusunis喂，

如果要防止用户点击任何东西，我建议覆盖一个div元素&也许使它半透明。下面是用于div & jQuery代码的CSS，用于动画显示屏幕叠加层和删除屏幕叠加层。在您收到数据后，拨打电话&“unblock_screen”后，请拨打“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>

来源

2012-02-05 20:02:53 vero

JavaScript：如何在等待Ajax响应时屏蔽整个屏幕

回答

相关问题