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

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

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

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

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

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

<div id="dialog">
 <p>Это диалоговое окно...</p>
</div>

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 $('#dialog').dialog();
});

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

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

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

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

$('#dialog').dialog({
 autoOpen: false
});

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

<button class="btn btn-success" id="open">Открыть окно</button>

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

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

$('#open').click(function(){
 $('#dialog').dialog('open');
});

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree