jQuery. How to lock screen while loading

Для того, чтобы в jQuery заблокировать экран, например, пока выполняется какая-то логика или загружаются данные с сервера, можно использовать специальный плагин

jQuery Block UI

Заблокировать страницу

$.blockUI();

Разблокировать страницу

$.unblockUI();

Помимо это есть варианты блокировки с опциями (затенение экрана и добавление текста)

Если этот плагин используется в связке с библиотекой require.js, тогда его подключать нужно так

requirejs.config({
    "baseUrl": "js/lib",
    paths: {
        'jquery': ['jquery-1.9.1.min'],
        'jquery-mobile': ['jquery.mobile-1.3.2.min'],
        'iscroll': ['iscroll'],
        'iscroll-lite': ['iscroll-lite'],
        'jquery-form': ["jquery.form"],
        'jquery-validity': ["jquery.validity.min"],
        'jquery-blockui':["jquery.blockUI"],
 
 ...
 
        'facebook-helper': ['../helper/facebook-helper'],
        "components": ["../components"]
    },
    shim: {
        'jquery-mobile': ['jquery'],
        'jquery-form': ["jquery"],
        'jquery-validity': ["jquery"],
        'jquery-blockui':["jquery"]
    }
 
});

Теперь пример, тут вызывается серверный POST-метод и пока мы ждем ответа от сервера, мы блокируем экран, а когда получаем ответ разблокируем его.

define(["jquery", "jquery-blockui"], function ($, settings) {
    var apiClient = {
 
        callPost: function (methodName, requestData, callback) {
            require(['utils'], function (utils) {
                console.info("Call server method: name='" + 
                methodName + "' requestData='" + 
                requestData + "' apiUrl='" + settings.apiUrl + "'");
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                } });
                $.ajax({url: settings.apiUrl + methodName, type: "post", 
                  data: requestData, success: function (data) {
 
                        if (data.serviceData && data.serviceData.error) {
                            $(document).ajaxStop($.unblockUI);
                            console.warn(data.serviceData.message);
                            utils.popup(data.serviceData.message)
                            // some logic invoke
                        } else {
                            callback(data);
                            utils.hideLoading();
                            $(document).ajaxStop($.unblockUI);
                        }
                    }, error: function (jqXHR, textStatus, errorThrown) {
                        $(document).ajaxStop($.unblockUI);
                        utils.popup("Oops...an error occurred. 
                          Please try again in a few seconds.");
                        console.info("Error:" + textStatus);
                        console.info("Error:" + errorThrown);
                    },
                        contentType: "application/json"
                    }
                )
            });
        }
 
...
 
});

Блокируем экран с затемнением

$.blockUI({ 
  css: {
    border: 'none',
    padding: '15px',
    backgroundColor: '#000',
    '-webkit-border-radius': '10px',
    '-moz-border-radius': '10px',
    opacity: .5,
    color: '#fff'
  } 
});

Разблокируем экран

$(document).ajaxStop($.unblockUI);