Как видите – это обычная страница
Как видите – это обычная страница. В строках 7 и 8 мы подключили jQuery и BlockUI. После этого написали скрипт, который управляет дополнительным слоем. Но прежде чем переходить к нему, рассмотрим структуру страницы. У нас есть три блока. 1) Форма с текстовым полем и кнопкой. При нажатии на кнопку необходимо отправить ajax запрос php скрипту (о нем чуть позже).
2) Блок, в который будет помещен ответ сервера (строка 36). 3) Блок с текстом, который будет показан на дополнительном слое (строки 38-40). Для того, чтобы этот блок не был виден на странице мы установили стиль display:none. Возвращаемся к скрипту (строки 9-22). Прежде всего, предусматриваем отключение дополнительного слоя сразу после завершения Ajax запроса (строка 10). Как видите, для этого достаточно вызвать $.unblockUI. Затем назначаем обработчик нажатия на кнопку «Отправить» (строки 14-19). Этот обработчик создает дополнительный слой (с помощью функции $.blockUI) и отправляет запрос. В параметрах функции мы указываем: message – текст, который появится на дополнительном слое (в нашем случае – содержимое блока topLayer). css – стили, которые будут применяться к этому слою. Естественно, это не все параметры. Полный список размещен на этой странице. Следующий шаг – отправка ajax запроса. Исключительно для целей тестирования я написал небольшой php скрипт, который просто возвращает количество букв во введенном имени. Кроме того, скрипт создает 3-х секундную задержку, чтобы можно было рассмотреть дополнительный слой.
