Библиотека jQuery UI. Виджет dialog

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как установить и настроить виджет dialog (диалог), который позволяет быстро создавать модальные окна (диалоговые окна).

Модальные окна – штука уже достаточно давняя в вебе. Однако, модальные окна до сих пор активно используются и не утратили своей актуальности. В первую очередь благодаря привлекательности и компактности: посетителям нравятся всплывающие окна, ну а разработчику они позволяют разместить больший объем данных на странице компактнее. Например, мы вполне можем скрыть на странице форму авторизации или регистрации, которую покажем затем в модальном окне. Это может быть не обязательно форма, а любые другие данные, которые будут показаны в диалоговом окне при клике по кнопке или ссылке.

Плагин dialog библиотеки jQuery UI позволяет быстро создавать диалоговые окна для вашей страницы. Давайте на простом примере рассмотрим создание диалогового окна, которое будет показано при клике по кнопке.

Итак, для начала создадим некий блок с данными:

Пока что ничего особенного, текст блока не скрыт и прекрасно виден на странице. Теперь попробуем использовать для данного блока метод плагина – dialog():

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

Это хорошо, но не совсем то, что мы хотели, поскольку окно показывается сразу же после загрузки страницы. Нам же нужно, чтобы окно было скрыто и показывалось при нажатии кнопки.

Для реализации задуманного необходимо настроить модальное окно, используя API плагина dialog. В частности, нам потребуется настройка autoOpen со значением false:

Хорошо, окно мы скрыли, но как же теперь показать его по требованию? Ну для начала нам потребуется кнопка, которая будет открывать модальное окно.

После этого остается отследить событие клика по данной кнопке и вызвать при наступлении события метод dialog с параметром open:

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

Ну а пока все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Комментарии Вконтакте: