JavaScript: как заблокировать весь экран во время ожидания ответа ajax

Question

У меня есть экран, в котором есть разные функции. Существует раскрывающийся список, в котором происходит вызов Ajax, и в ответ возвращается jsp-страница. Этот ответ я затем помещаю в div ниже моего раскрывающегося списка. Теперь я хочу, чтобы до тех пор, пока этот jsp не будет заполнен элементом div, экран заблокирован либо в окне предупреждения, либо в другом диалоговом окне. Как я могу достичь этого?

Answer 1

Если вы действительно хотите, чтобы заблокировать пользовательский интерфейс, просто сделать запрос AJAX синхронное.

Answer 2

Вы можете использовать плагин blockui jquery от here. Вызовите blockUI перед тем, как сделать ajax-вызов и разблокировать UI в своем обратном вызове ajax.

Answer 3

Я бы использовал JQuery и JQuery UI. JQuery UI предоставляет модальное диалоговое окно, в котором вы можете разместить загрузочное сообщение, которое не позволит пользователю щелкнуть в другом месте экрана.

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

Answer 4

вы можете использовать div, а также z-index, opacity и курсор. хотя я не знаю вашего приложения, блокировка всей страницы не похожа на отличный пользовательский интерфейс для меня. возможно, вы можете поместить div только по затронутому району страницы

Answer 5

Просто используйте булевский флаг, который до тех пор, пока он не установлен (при получении содержимого), вы блокируете функциональность. И как только этот флаг установлен, продолжайте дальше. Предполагая, что у вас есть контроль над этими функциями.

Answer 6

@linusunis кормили,

Если вы хотите запретить пользователю нажимать на все, что я предлагаю наложив Div элемент &, возможно, сделать его полупрозрачным. Ниже приведен CSS для div & Код jQuery для анимации отображения наложения экрана и удаления наложения экрана. Просто позвоните «block_screen», когда вы делаете свой звонок & «unblock_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>