Диалоговое виджет

Любая страница может быть представлена как модальное диалоговое окно, добавив атрибут data-rel="dialog" к ссылке якоря страницы. При применении атрибута "dialog", фреймворк добавляет стили для скругленных углов, отступов вокруг страницы и тёмного фона, чтобы диалоговое окно выглядело как приостановленное над страницей.

<a href="foo.html" data-rel="dialog">Open dialog</a>

Вы можете открыть диалоговое окно программно, вызвав метод $.mobile.changePage:

// Dialog loaded via Ajax
$.mobile.changePage( "path/to/dialog.html", { role: "dialog" } );
 
// Dialog present in a multipage document
$.mobile.changePage( "#myDialog", { role: "dialog" } );

Переходы

По умолчанию диалоговое окно откроется с переходом 'pop'. Как и все страницы, вы можете указать любой переход страницы для диалогового окна, добавив атрибут data-transition к ссылке. Для более диалогового ощущения рекомендуется указать переход "pop", "slidedown" или "flip".
Возможные значения: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

Закрытие диалоговых окон

При нажатии на любую ссылку внутри диалогового окна фреймворк автоматически закроет диалоговое окно и перейдёт к запрошенной странице, как если бы диалоговое окно было обычной страницей. Тем не менее, диалоговые окна также могут быть объединены, как объяснено ниже в разделе "Цепные диалоговые окна". Аналогично, ссылка, которая открывает всплывающее окно, также оставит диалоговое окно на месте.

Если у диалогового окна есть заголовок, фреймворк добавит кнопку закрытия слева от заголовка. Вы можете изменить позицию, добавив data-close-btn="right" к контейнеру диалогового окна. Если вы не хотите кнопку закрытия в заголовке или хотите добавить свою пользовательскую кнопку закрытия, вы можете использовать data-close-btn="none".

Для создания кнопки "отмена" в диалоговом окне просто ссылайтесь на страницу, которая открыла диалоговое окно, и добавьте атрибут data-rel="back" к вашей ссылке. Этот шаблон связывания с предыдущей страницей также пригоден для устройств без JS.

Для сгенерированных JavaScript-ссылок вы можете просто установить атрибут href в "#" и использовать атрибут data-rel="back". Вы также можете вызвать метод close() диалогового окна для программного закрытия диалоговых окон, например: $( ".ui-dialog" ).dialog( "close" ).

Установка текста кнопки закрытия

Как и в виджете страниц, вы можете установить текст кнопки закрытия диалогового окна с помощью параметра или атрибута данных. Параметр может быть настроен для всех диалоговых окон путём привязки к событию mobileinit и установки свойства $.mobile.dialog.prototype.options.closeBtnText на строку по вашему выбору, или вы можете разместить атрибут данных data-close-btn-text для настройки текста из вашей разметки.

История и поведение кнопки "Назад"

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

Цепные диалоговые окна

Обратите внимание: если диалоговое окно открывает другое диалоговое окно (цепочка), закрытие последнего с помощью ссылки типа data-rel="back" всегда переходит к предыдущему диалоговому окну, пока не будет достигнута корневая страница типа data-role="page". Это гарантирует последовательную навигацию между диалоговыми окнами.

Стиль и тема

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

По умолчанию у диалоговых окон скругленные углы. Параметр corners может быть установлен в false, добавив data-corners="false" к контейнеру диалогового окна:

Диалоговые окна появляются как плавающие над слоем перекрытия. Это перекрытие по умолчанию использует цветовой оттенок 'a' содержимого, но атрибут data-overlay-theme может быть добавлен к оболочке страницы, чтобы установить перекрытие на любой цветовой оттенок.

Диалоговые окна также могут использоваться как панель управления для предложения нескольких кнопок, если вы просто удалите верхний отступ из внутреннего контейнера диалогового окна. Например, если ваша страница диалогового окна имела класс my-dialog, вы могли бы добавить этот CSS для привязки этого диалогового окна к верху: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, или вы могли бы просто применить этот стиль ко всем диалоговым окнам с помощью .ui-dialog .ui-dialog-contain { margin-top: 0 }.

Ширина и отступы диалогового окна

Для лучшей читаемости диалоговые окна имеют по умолчанию ширину width 92.5% и max-width 500 пикселей. Также есть верхний отступ margin 10%, чтобы диалоговые окна имели больший верхний отступ на больших экранах, но уменьшались до маленького отступа на смартфонах. Внутренний контейнер диалогового окна смещён в top на 15 пикселей, чтобы скрыть стили углов, если диалоговое окно используется как панель управления (см. выше). Чтобы переопределить эти стили, добавьте следующую CSS-правило в свой stylesheet и настройте по необходимости:

.ui-dialog-contain {
  width: 92.5%;
  max-width: 500px;
  margin: 10% auto 15px auto;
  padding: 0;
  position: relative;
  top: -15px;
}