Модальное диалоговое окно JavaScript без взаимодействия с пользователем, которое не может быть закрыто

Question

У меня есть страница, где пользователь может обновить форму, щелкнув по имени объекта.Подумайте о списке имен и форме со всеми другими полями (адрес, возраст, пол и т. Д.), Которые будут обновлены с помощью AJAX из onClick.Как создать модальное диалоговое окно («Пожалуйста, подождите.»), Которое предотвращает взаимодействие с пользователем до тех пор, пока вызов AJAX не вернет данные?Я не хочу, чтобы пользователь мог нажимать кнопку «X» или «Закрыть».Он или она должны ждать!

Answer 1

Взгляните на плагин BlockUI .

Он позволяет блокировать взаимодействие со страницей или определенным элементом, добавляя наложение поверх страницы илиэтот элемент.Вы можете определить сообщение и получить множество опций для настройки внешнего вида.

Например, вы можете заблокировать страницу, когда выполняется запрос ajax с помощью:

$(document).ajaxStart(function() {
    $.blockUI({
        message: '<h1>Just a moment...</h1>'
    });
}

$(document).ajaxStop(function() { $.unblockUI(); }

Answer 2

Вам нужно поместить DIV на все содержимое страницы. Обычно это полупрозрачно, чтобы указать, что пользователь должен ждать. Иногда на оверлей накладывается «загрузочный» счетчик.

Answer 3

var d = document.createElement('div');
d.style.position = "fixed";
d.style.top = d.style.left = d.style.right = d.style.bottom = "0px";
document.body.appendChild(d);

Это основная маска.После этого вы можете добавить дополнительные элементы, например, поле «Пожалуйста, подождите».