Диалоговое окно

Диалоговое окноверсия добавлена: 1.0

Описание: Открытие содержимого в интерактивном всплывающем окне.

Быстрое навигационное менюПримеры

Диалоговое окно — это плавающее окно, которое содержит строку заголовка и область содержимого. Окно диалога по умолчанию может перемещаться, изменяться в размерах и закрываться с помощью иконки 'x'.

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

Часто добавляются нижняя панель кнопок и полупрозрачный модальный слой перекрытия.

Фокус

При открытии диалогового окна фокус автоматически перемещается на первый элемент, соответствующий следующим условиям:

Первый элемент в диалоговом окне с атрибутом autofocus
Первый элемент :tabbable в области содержимого диалогового окна
Первый элемент :tabbable в области кнопок диалогового окна
Кнопка закрытия диалогового окна
Само диалоговое окно

Во время открытия диалогового окна виджет гарантирует, что навигация по клавиатуре с помощью клавиши 'tab' циклически перемещает фокус между фокусируемыми элементами в диалоговом окне, а не за его пределами. Модальные диалоговые окна также предотвращают нажатие мышью на элементы за пределами диалогового окна.

При закрытии диалогового окна фокус автоматически возвращается к элементу, который имел фокус при открытии диалогового окна.

Скрытие кнопки закрытия

В некоторых случаях может потребоваться скрыть кнопку закрытия, например, если у вас есть кнопка закрытия на панели кнопок. Лучший способ сделать это — с помощью CSS. Например, можно определить простое правило, такое как:

.no-close .ui-dialog-titlebar-close {
  display: none;
}

Затем, вы можете просто добавить класс no-close к любому диалоговому окну, чтобы скрыть его кнопку закрытия:

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Тематизация

Диалоговое окно использует CSS-фреймворк jQuery UI для настройки своего внешнего вида. Если требуется стилизация, специфичная для диалогового окна, можно использовать следующие имена классов CSS для переопределений или в качестве ключей для параметра classes:

ui-dialog: Внешний контейнер диалогового окна. Если установлен параметр draggable, класс ui-dialog-dragging добавляется во время перетаскивания. Если установлен параметр resizable, класс ui-dialog-resizing добавляется во время изменения размеров. Если установлен параметр buttons, добавляется класс ui-dialog-buttons.
- ui-dialog-titlebar: Строка заголовка, содержащая заголовок и кнопку закрытия диалогового окна.
  - ui-dialog-title: Контейнер вокруг текстового заголовка диалогового окна.
  - ui-dialog-titlebar-close: Кнопка закрытия диалогового окна.
- ui-dialog-content: Контейнер вокруг содержимого диалогового окна. Это также элемент, с которым был инициирован виджет.
- ui-dialog-buttonpane: Панель, содержащая кнопки диалогового окна. Она будет присутствовать только в том случае, если установлен параметр buttons.
  - ui-dialog-buttonset: Контейнер вокруг самих кнопок.

Кроме того, когда установлен параметр modal, к элементу с классом ui-widget-overlay добавляется к <body>.

Зависимости

UI Core
Фабрика виджетов
Позиционирование
Кнопка
Перетаскиваемый (необязательно; для использования с параметром draggable)
Изменяемый размер (необязательно; для использования с параметром resizable)
Ядро эффектов (необязательно; для использования с параметрами show и hide)

Дополнительные заметки:

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

Параметры

appendTo

Тип: Селектор

По умолчанию: "body"

Элемент, в который будет добавлен диалоговое окно (и оверлей, если modal).

Примечание: Параметр appendTo не следует изменять, пока диалоговое окно открыто.

(версия добавлена: 1.10.0)

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром appendTo:

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Получите или установите параметр appendTo после инициализации:

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

autoOpen

Тип: Булево значение

По умолчанию: true

Если установлено в значение true, диалоговое окно будет автоматически открыто при инициализации. Если установлено в false, диалоговое окно останется скрытым до вызова метода open().

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром autoOpen:

$( ".selector" ).dialog({
  autoOpen: false
});

Получите или установите параметр autoOpen после инициализации:

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

buttons

Тип: Объект или Массив

По умолчанию: []

Определяет, какие кнопки должны быть отображены в диалоговом окне. Контекст обратного вызова — элемент диалогового окна; если вам нужен доступ к кнопке, она доступна в качестве целевого объекта события.

Поддерживаются несколько типов:

Объект: Ключи — метки кнопок, а значения — обратные вызовы при нажатии на соответствующую кнопку.
Массив: Каждый элемент массива должен быть объектом, определяющим атрибуты, свойства и обработчики событий для установки на кнопке. Дополнительно, ключ icon может использоваться для управления параметром icon кнопки, а ключ showText может использоваться для управления параметром text кнопки.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром buttons:

$( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});

Получите или установите параметр buttons после инициализации:

// Getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
 
// Setter
$( ".selector" ).dialog( "option", "buttons", 
  [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
);

classes

Тип: Объект

По умолчанию:

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

Укажите дополнительные классы для добавления к элементам виджета. Любой из классов, указанных в разделе Тема, может быть использован в качестве ключа для переопределения его значения. Дополнительную информацию об этом параметре можно найти в статье о параметре classes.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром classes, изменяя тему для класса ui-dialog:

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

Получите или установите свойство параметра classes после инициализации, здесь считывая и изменяя тему для класса ui-dialog:

// Getter
var themeClass = $( ".selector" ).dialog( "option", "classes.ui-dialog" );
 
// Setter
$( ".selector" ).dialog( "option", "classes.ui-dialog", "highlight" );

closeOnEscape

Тип: Булево значение

По умолчанию: true

Определяет, должно ли диалоговое окно закрываться, когда у него есть фокус, и пользователь нажимает клавишу Escape.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром closeOnEscape:

$( ".selector" ).dialog({
  closeOnEscape: false
});

Получите или установите параметр closeOnEscape после инициализации:

// Getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
 
// Setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );

closeText

Тип: Строка

По умолчанию: "close"

Указывает текст для кнопки закрытия. Обратите внимание, что текст закрытия невидимый при использовании стандартной темы.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром closeText:

$( ".selector" ).dialog({
  closeText: "hide"
});

Получите или установите параметр closeText после инициализации:

// Getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
 
// Setter
$( ".selector" ).dialog( "option", "closeText", "hide" );

dialogClass

Тип: Строка

По умолчанию: ""

Указанное(ые) имя(на) класса(ов) будут добавлены к диалоговому окну для дополнительной темы.

Параметр dialogClass устарел в пользу classes параметра, использующего свойство ui-dialog.

(версия устарела: 1.12)

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром dialogClass:

$( ".selector" ).dialog({
  dialogClass: "alert"
});

Получите или установите параметр dialogClass после инициализации:

// Getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
 
// Setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );

draggable

Тип: Булево значение

По умолчанию: true

Если установлено в значение true, диалоговое окно будет перетаскиваемым за заголовок. Требуется включение виджета jQuery UI Draggable.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром draggable:

$( ".selector" ).dialog({
  draggable: false
});

Получите или установите параметр draggable после инициализации:

// Getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
 
// Setter
$( ".selector" ).dialog( "option", "draggable", false );

height

Тип: Число или Строка

По умолчанию: "auto"

Высота диалогового окна.

Поддерживаются несколько типов:

Число: Высота в пикселях.
Строка: Единственное поддерживаемое строковое значение — "auto", которое позволит высоте диалогового окна настраиваться на основе его содержимого.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром height:

$( ".selector" ).dialog({
  height: 400
});

Получите или установите параметр height после инициализации:

// Getter
var height = $( ".selector" ).dialog( "option", "height" );
 
// Setter
$( ".selector" ).dialog( "option", "height", 400 );

hide

Тип: Булево значение или Число или Строка или Объект

По умолчанию: null

Как и каким образом анимировать скрытие диалогового окна.

Поддерживаются несколько типов:

Булево значение: При установке в значение false анимация не будет использоваться, и диалоговое окно будет скрыто немедленно. При установке в значение true диалоговое окно будет скрываться со стандартной длительностью и стандартной анимацией.
Число: Диалоговое окно будет скрываться с указанной длительностью и стандартной анимацией.
Строка: Диалоговое окно будет скрываться с использованием указанного эффекта. Значение может быть именем встроенного метода анимации jQuery, например, "slideUp", или именем эффекта jQuery UI, например, "fold". В обоих случаях эффект будет использоваться со стандартной длительностью и стандартной анимацией.
Объект: Если значение является объектом, то свойства effect, delay, duration и easing могут быть предоставлены. Если свойство effect содержит имя метода jQuery, то этот метод будет использован; в противном случае предполагается, что это имя эффекта jQuery UI. При использовании эффекта jQuery UI, который поддерживает дополнительные настройки, вы можете включить эти настройки в объект, и они будут переданы эффекту. Если duration или easing пропущены, будут использованы стандартные значения. Если effect пропущен, будет использован "fadeOut". Если delay пропущен, задержка не используется.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром hide:

$( ".selector" ).dialog({
  hide: { effect: "explode", duration: 1000 }
});

Получите или установите параметр hide после инициализации:

// Getter
var hide = $( ".selector" ).dialog( "option", "hide" );
 
// Setter
$( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } );

maxHeight

Тип: Число

По умолчанию: false

Максимальная высота, до которой может быть изменён размер диалогового окна, в пикселях.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром maxHeight:

$( ".selector" ).dialog({
  maxHeight: 600
});

Получите или установите параметр maxHeight после инициализации:

// Getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
 
// Setter
$( ".selector" ).dialog( "option", "maxHeight", 600 );

maxWidth

Тип: Число

По умолчанию: false

Максимальная ширина, до которой может быть изменён размер диалогового окна, в пикселях.

Примеры кода:

Инициализируйте диалоговое окно с указанным параметром maxWidth:

$( ".selector" ).dialog({
  maxWidth: 600
});

Получите или установите параметр maxWidth после инициализации:

// Getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
 
// Setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );

Минимальная высота

Тип: Число

Значение по умолчанию: 150

Минимальная высота, до которой можно изменить размер диалогового окна, в пикселях.

Примеры кода:

Инициализация диалогового окна с параметром minHeight:

$( ".selector" ).dialog({
  minHeight: 200
});

Получение или установка параметра minHeight после инициализации:

// Getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
 
// Setter
$( ".selector" ).dialog( "option", "minHeight", 200 );

Минимальная ширина

Тип: Число

Значение по умолчанию: 150

Минимальная ширина, до которой можно изменить размер диалогового окна, в пикселях.

Примеры кода:

Инициализация диалогового окна с параметром minWidth:

$( ".selector" ).dialog({
  minWidth: 200
});

Получение или установка параметра minWidth после инициализации:

// Getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
 
// Setter
$( ".selector" ).dialog( "option", "minWidth", 200 );

Режим модального окна

Тип: Булево

Значение по умолчанию: false

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

Примеры кода:

Инициализация диалогового окна с параметром modal:

$( ".selector" ).dialog({
  modal: true
});

Получение или установка параметра modal после инициализации:

// Getter
var modal = $( ".selector" ).dialog( "option", "modal" );
 
// Setter
$( ".selector" ).dialog( "option", "modal", true );

Позиция

Тип: Объект

Значение по умолчанию: { my: "center", at: "center", of: window }

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

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

Примеры кода:

Инициализация диалогового окна с параметром position:

$( ".selector" ).dialog({
  position: { my: "left top", at: "left bottom", of: button }
});

Получение или установка параметра position после инициализации:

// Getter
var position = $( ".selector" ).dialog( "option", "position" );
 
// Setter
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } );

Ресайзирование

Тип: Булево

Значение по умолчанию: true

Если установлено в true, диалоговое окно будет изменяемо по размеру. Требуется включение виджета jQuery UI Ресайзирование.

Примеры кода:

Инициализация диалогового окна с параметром resizable:

$( ".selector" ).dialog({
  resizable: false
});

Получение или установка параметра resizable после инициализации:

// Getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
 
// Setter
$( ".selector" ).dialog( "option", "resizable", false );

Отображение

Тип: Булево или Число или Строка или Объект

Значение по умолчанию: null

Как и с какой анимацией отображается диалоговое окно.

Поддерживаются несколько типов:

Булево: При установке в false, анимация не будет использоваться, и диалоговое окно будет отображено немедленно. При установке в true, диалоговое окно будет плавно отображено с помощью стандартной продолжительности и стандартного ускорения.
Число: Диалоговое окно будет плавно отображено со стандартным ускорением и указанной продолжительностью.
Строка: Диалоговое окно будет отображено с использованием указанного эффекта. Значение может быть именем встроенного метода анимации jQuery, например, "slideDown", или именем эффекта jQuery UI эффекта, например, "fold". В любом случае эффект будет использоваться со стандартной продолжительностью и стандартным ускорением.
Объект: Если значение является объектом, то свойства effect, delay, duration и easing могут быть предоставлены. Если свойство effect содержит имя метода jQuery, то этот метод будет использован; в противном случае предполагается, что это имя эффекта jQuery UI. При использовании эффекта jQuery UI, поддерживающего дополнительные настройки, вы можете включить эти настройки в объект, и они будут переданы эффекту. Если duration или easing опущено, будут использованы значения по умолчанию. Если effect опущено, то будет использовано значение "fadeIn". Если delay опущено, задержка не используется.

Примеры кода:

Инициализация диалогового окна с параметром show:

$( ".selector" ).dialog({
  show: { effect: "blind", duration: 800 }
});

Получение или установка параметра show после инициализации:

// Getter
var show = $( ".selector" ).dialog( "option", "show" );
 
// Setter
$( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } );

Заголовок

Тип: Строка

Значение по умолчанию: null

Указывает заголовок диалогового окна. Если значение равно null, будет использоваться атрибут title исходного элемента диалогового окна.

Примеры кода:

Инициализация диалогового окна с параметром title:

$( ".selector" ).dialog({
  title: "Dialog Title"
});

Получение или установка параметра title после инициализации:

// Getter
var title = $( ".selector" ).dialog( "option", "title" );
 
// Setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );

Ширина

Тип: Число

Значение по умолчанию: 300

Ширина диалогового окна в пикселях.

Примеры кода:

Инициализация диалогового окна с параметром width:

$( ".selector" ).dialog({
  width: 500
});

Получение или установка параметра width после инициализации:

// Getter
var width = $( ".selector" ).dialog( "option", "width" );
 
// Setter
$( ".selector" ).dialog( "option", "width", 500 );

Методы

close()Возвращает: jQuery (только плагин)

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

Этот метод не принимает аргументы.

Примеры кода:

Вызов метода close:

$( ".selector" ).dialog( "close" );

destroy()Возвращает: jQuery (только плагин)

Полностью удаляет функциональность диалога. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает аргументы.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).dialog( "destroy" );

instance()Возвращает: Объект

Получает объект экземпляра диалога. Если у элемента нет связанного экземпляра, возвращается undefined.

В отличие от других методов виджета, instance() безопасно вызывать для любого элемента после загрузки плагина диалога.

Этот метод не принимает аргументы.

Примеры кода:

Вызов метода instance:

$( ".selector" ).dialog( "instance" );

isOpen()Возвращает: Булево значение

Является ли диалог открытым в данный момент.

Этот метод не принимает аргументы.

Примеры кода:

Вызов метода isOpen:

var isOpen = $( ".selector" ).dialog( "isOpen" );

moveToTop()Возвращает: jQuery (только плагин)

Перемещает диалог наверх стека диалогов.

Этот метод не принимает аргументы.

Примеры кода:

Вызов метода moveToTop:

$( ".selector" ).dialog( "moveToTop" );

open()Возвращает: jQuery (только плагин)

Открывает диалог.

Этот метод не принимает аргументы.

Примеры кода:

Вызов метода open:

$( ".selector" ).dialog( "open" );

option( optionName )Возвращает: Объект

Получает значение, связанное с указанным optionName.

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

optionName

Тип: Строка

Имя опции для получения.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );

option()Возвращает: PlainObject

Получает объект, содержащий пары ключ/значение, представляющие текущий хэш опций диалога.

Эта сигнатура не принимает аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).dialog( "option" );

option( optionName, value )Возвращает: jQuery (только плагин)

Устанавливает значение опции диалога, связанной с указанным optionName.

Примечание: Для опций, значениями которых являются объекты, вы можете установить значение только одного свойства, используя точечную нотацию для optionName. Например, "foo.bar" обновит только свойство bar опции foo.

optionName

Тип: Строка

Имя опции для установки.
value

Тип: Объект

Значение для установки опции.

Примеры кода:

Вызов метода:

$( ".selector" ).dialog( "option", "disabled", true );

option( options )Возвращает: jQuery (только плагин)

Устанавливает одну или несколько опций для диалога.

options

Тип: Объект

Карта пар опция-значение для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).dialog( "option", { disabled: true } );

Точки расширения

Виджет диалога построен с помощью фабрики виджетов и может быть расширен. При расширении виджетов вы можете переопределять или добавлять к поведению существующих методов. Следующие методы предоставляются в качестве точек расширения с такой же стабильностью API, как и методы плагина, перечисленные выше. Для получения дополнительной информации о расширениях виджетов см. Расширение виджетов с помощью фабрики виджетов.

_allowInteraction( event )Возвращает: Булево значение

Модальные диалоги не позволяют пользователям взаимодействовать с элементами, находящимися за диалогом. Это может быть проблемой для элементов, которые не являются дочерними элементами диалога, но расположены абсолютно, чтобы выглядеть так, как будто они таковыми являются. Метод _allowInteraction() определяет, следует ли позволять пользователю взаимодействовать с заданным целевым элементом; следовательно, он может использоваться для разрешения взаимодействия с элементами, которые не являются дочерними элементами диалога, но вы хотите, чтобы пользователи могли их использовать.

event

Тип: Событие

Примеры кода:

Разрешение использования плагина Select2 внутри модальных диалогов. Вызов _super() гарантирует, что с элементами внутри диалога всё ещё можно взаимодействовать.

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

События

beforeClose( event, ui )Type: `dialogbeforeclose`

Вызывается перед закрытием диалогового окна. Если отменено, диалоговое окно не закроется.

event

Type: Event
ui

Type: Object

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом beforeClose:

$( ".selector" ).dialog({
  beforeClose: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogbeforeclose:

$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );

close( event, ui )Type: `dialogclose`

Вызывается при закрытии диалогового окна.

event

Type: Event
ui

Type: Object

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом close:

$( ".selector" ).dialog({
  close: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogclose:

$( ".selector" ).on( "dialogclose", function( event, ui ) {} );

create( event, ui )Type: `dialogcreate`

Вызывается при создании диалогового окна.

event

Type: Event
ui

Type: Object

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом create:

$( ".selector" ).dialog({
  create: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogcreate:

$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );

drag( event, ui )Type: `dialogdrag`

Вызывается во время перетаскивания диалогового окна.

event

Type: Event
ui

Type: Object
- position
  
  Type: Object
  
  Текущее положение CSS диалогового окна.
- offset
  
  Type: Object
  
  Текущее смещение положения диалогового окна.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом drag:

$( ".selector" ).dialog({
  drag: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogdrag:

$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );

dragStart( event, ui )Type: `dialogdragstart`

Вызывается, когда пользователь начинает перетаскивать диалоговое окно.

event

Type: Event
ui

Type: Object
- position
  
  Type: Object
  
  Текущее положение CSS диалогового окна.
- offset
  
  Type: Object
  
  Текущее смещение положения диалогового окна.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом dragStart:

$( ".selector" ).dialog({
  dragStart: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogdragstart:

$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );

dragStop( event, ui )Type: `dialogdragstop`

Вызывается после перетаскивания диалогового окна.

event

Type: Event
ui

Type: Object
- position
  
  Type: Object
  
  Текущее положение CSS диалогового окна.
- offset
  
  Type: Object
  
  Текущее смещение положения диалогового окна.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом dragStop:

$( ".selector" ).dialog({
  dragStop: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogdragstop:

$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );

focus( event, ui )Type: `dialogfocus`

Вызывается, когда диалоговое окно получает фокус.

event

Type: Event
ui

Type: Object

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом focus:

$( ".selector" ).dialog({
  focus: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogfocus:

$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );

open( event, ui )Type: `dialogopen`

Вызывается при открытии диалогового окна.

event

Type: Event
ui

Type: Object

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом open:

$( ".selector" ).dialog({
  open: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogopen:

$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

resize( event, ui )Type: `dialogresize`

Вызывается во время изменения размера диалогового окна.

event

Type: Event
ui

Type: Object
- originalPosition
  
  Type: Object
  
  Положение CSS диалогового окна до изменения размера.
- position
  
  Type: Object
  
  Текущее положение CSS диалогового окна.
- originalSize
  
  Type: Object
  
  Размер диалогового окна до изменения размера.
- size
  
  Type: Object
  
  Текущий размер диалогового окна.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом resize:

$( ".selector" ).dialog({
  resize: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogresize:

$( ".selector" ).on( "dialogresize", function( event, ui ) {} );

resizeStart( event, ui )Type: `dialogresizestart`

Вызывается, когда пользователь начинает изменять размер диалогового окна.

event

Type: Event
ui

Type: Object
- originalPosition
  
  Type: Object
  
  Положение CSS диалогового окна до изменения размера.
- position
  
  Type: Object
  
  Текущее положение CSS диалогового окна.
- originalSize
  
  Type: Object
  
  Размер диалогового окна до изменения размера.
- size
  
  Type: Object
  
  Текущий размер диалогового окна.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом resizeStart:

$( ".selector" ).dialog({
  resizeStart: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogresizestart:

$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );

resizeStop( event, ui )Type: `dialogresizestop`

Вызывается после изменения размера диалогового окна.

event

Type: Event
ui

Type: Object
- originalPosition
  
  Type: Object
  
  Положение CSS диалогового окна до изменения размера.
- position
  
  Type: Object
  
  Текущее положение CSS диалогового окна.
- originalSize
  
  Type: Object
  
  Размер диалогового окна до изменения размера.
- size
  
  Type: Object
  
  Текущий размер диалогового окна.

Примеры кода:

Инициализация диалогового окна с указанным обратным вызовом resizeStop:

$( ".selector" ).dialog({
  resizeStop: function( event, ui ) {}
});

Привязка обработчика событий к событию dialogresizestop:

$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );

Пример:

Простое диалоговое окно jQuery UI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

Диалоговое окно