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響應時屏蔽整個屏幕

回答

相關問題