Виджет Dialog

83

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

Создание виджета Dialog

Для создания виджета Dialog, позволяющего превращать блочные элементы (обычно — div) в диалоговые окна, следует выбрать элемент с помощью jQuery и вызвать для него метод dialog(). Виджет Dialog относится к числу тех виджетов, для нормальной работы которых требуется определенная структура HTML-элементов, хотя эта структура намного проще, чем, например, та, которая требуется для виджета Tabs.

Документ, содержащий необходимые элементы и сценарий для создания виджета Dialog, представлен в примере ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
$(function() {
	
    $('#dialog').dialog();
			
});
    </script>   
</head>
<body>
    <div id="dialog" title="Диалоговое окно">
        Содержимое, которое будет отображаться в диалоговом окне. К этому <b>содержимому</b> могут применяться <em>стили</em>.
    </div>
</body>
</html>

Для виджета Dialog требуется элемент div с атрибутом title. Значение этого атрибута служит заголовком диалогового окна. Содержимое элемента div используется в качестве информации, отображаемой в диалоговом окне, и, как показывает пример, может включать в себя другие элементы. Вызов метода dialog() без передачи ему каких-либо опций, как это сделано в примере ниже, приводит к немедленному открытию диалогового окна.

Вид диалогового окна в окне браузера приведен на рисунке:

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

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

Команда jQuery UI хорошо поработала над тем, чтобы наделить диалоговое окно максимально широким набором различных возможностей. Пользователь может переместить диалоговое окно в пределах окна браузера, перетаскивая его заголовок. Можно изменить размер диалогового окна с помощью кнопки-манипулятора, находящейся в его правом нижнем углу, или закрыть его, щелкнув на кнопке закрытия в правом верхнем углу. А поскольку виджет Dialog построен из HTML-элементов, его внешний вид определяется темой оформления jQuery UI, выбранной вами, и он может включать в себя сложное HTML-содержимое, оформленное с помощью стилей.

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
$(function() {
	
    $('#dialog').dialog({
		autoOpen: false
	});
	
	$('button').button().click(function(e) {
        $('#dialog').dialog("open")
    });
			
});
    </script>   
</head>
<body>
    <div id="dialog" title="Диалоговое окно">
        Содержимое, которое будет отображаться в диалоговом окне. К этому <b>содержимому</b> могут применяться <em>стили</em>.
    </div>
    <button>Показать диалоговое окно</button>
</body>
</html>

Чтобы предотвратить немедленное открытие диалогового окна, следует использовать опцию autoOpen. Если значение этой опции равно false, то вновь созданное диалоговое окно останется невидимым. Когда вы будете готовы к тому, чтобы отобразить его, вызовите метод open.

Настройка виджета Dialog

Виджет Dialog поддерживает ряд свойств, обеспечивающих настройку конфигурации диалогового окна, представляемого пользователю, в соответствии с конкретными потребностями. С одним из них, свойством autoOpen, вы уже познакомились в предыдущем разделе, а их полный перечень приведен в таблице ниже:

Свойства виджета Dialog
Свойство Описание
autoOpen Если эта опция равна true, то диалоговое окно открывается сразу же после его создания с помощью метода dialog(). Значение по умолчанию — true
buttons Позволяет указать набор кнопок, которые должны быть добавлены в виджет, и функции, которые будут вызываться после щелчка на соответствующей кнопке. По умолчанию кнопки отсутствуют
closeOnEscape Если эта опция равна true, то диалоговое окно можно будет убрать с экрана, нажав клавишу <Esc>. Значение по умолчанию — true
draggable Если эта опция равна true, то пользователь сможет перемещать диалоговое окно, перетаскивая его заголовок, в пределах окна браузера
height Определяет начальную высоту диалогового окна в пикселях. По умолчанию имеет значение auto, при котором высота диалогового окна устанавливается автоматически
hide Определяет тип анимации, используемой для сокрытия диалогового окна
maxHeight Определяет максимальную высоту диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по высоте
maxWidth Определяет максимальную ширину диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по ширине
minHeight Определяет минимальную высоту диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по высоте
minWidth Определяет минимальную ширину диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по ширине
modal Если эта опция равна true, то диалоговое окно будет создано как модальное, и пока оно не будет скрыто, пользователь не сможет взаимодействовать с документом
position Определяет начальную позицию диалогового окна. Значение по умолчанию — center, которому соответствует расположение диалогового окна по центру окна браузера
resizable Если эта опция равна true, то диалоговое окно будет иметь кнопку-манипулятор, с помощью которой пользователь сможет изменить его размер. Значение по умолчанию — true
show Определяет тип анимации, используемой для отображения диалогового окна
stack Если эта опция равна true, то щелчок на диалоговом окне перемещает его на передний план на экране. Значение по умолчанию — true
title Определяет заголовок диалогового окна
width Определяет начальную ширину диалогового окна в пикселях. По умолчанию имеет значение auto, при котором ширина диалогового окна устанавливается автоматически

Настройка внешнего вида базового диалогового окна

Опция title позволяет создать диалоговое окно на основе элемента div, не имеющего атрибута title. Это может быть полезным, если у вас отсутствует возможность управлять генерацией элементов, которые вы хотите использовать в диалоговом окне. Пример использования опции title приведен ниже:

$(function() {
	
    $('#dialog').dialog({
		title: 'Привет',
		resizable: false
	});
			
});

В этом примере также была применена опция resizable. Она управляет наличием кнопки-манипулятора в правом нижнем углу диалогового окна. Лично мне больше нравятся диалоговые окна, не содержащие никаких лишних элементов, но обычно я оставляю значение опции resizable равным true, поскольку предпочитаю предоставлять пользователю возможность изменять размер диалогового окна в зависимости от размера содержимого. Вид диалогового окна в окне браузера представлен на рисунке:

Диалоговое окно с настраиваемым заголовком не имеющее кнопки-манипулятора

Настройка местоположения диалогового окна

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

Типы значений, используемых в опции position
Значение Описание
строка Одно из следующих строковых значений: center, left, right, top, bottom
[число, число] Массив из двух элементов, содержащий координаты x и y левого верхнего угла окна, например [30, 20]
[строка, строка] Массив из двух элементов, содержащий строковые значения координат из приведенного выше списка, например ['left','top']

По умолчанию диалоговое окно располагается по центру окна браузера (значение center). Обычно эта позиция является наилучшей, однако для сравнения ниже приведен пример, в котором диалоговое окно позиционируется с использованием строковых значений:

$(function() {
	
    $('#dialog').dialog({
		position: ['left','top']
	});
			
});

Обратите внимание на то, что при использовании строковых значений первой указывается позиция вдоль оси X. Конечный результат представлен на рисунке:

Диалоговое окно, располагающееся в указанной позиции

Добавление кнопок в диалоговое окно

В диалоговое окно jQuery UI можно добавить кнопки, используя опцию buttons. Значением этой опции является массив объектов, у каждого из которых имеются свойства text и click. Значение свойства text используется в качестве надписи на кнопке, а значением свойства click определяется функция, которая будет вызываться при выполнении на кнопке щелчка.

Пример использования опции buttons приведен ниже:

$(function() {
	
    $('#dialog').dialog({
		buttons: [{text: "OK", click: function() {/* выполнить некоторые действия */}},
                  {text: "Отмена", click: function() {$(this).dialog("close")}}]
	});
			
});

В этом сценарии добавляются две кнопки. Функция для кнопки "OK" не выполняет никаких полезных действий, тогда как щелчок на кнопке "Отмена" приводит к закрытию диалогового окна.

Обратите внимание на использование переменной this в селекторе jQuery внутри функции—обработчика события click для кнопки "Отмена". Эта переменная указывает на элемент div, который использовался для создания диалогового окна. В этом примере используется метод close, при вызове которого диалоговое окно исчезает с экрана. Методы виджета Dialog описываются более подробно далее. Внешний вид диалогового окна с добавленными кнопками представлен на рисунке:

Добавление кнопок в диалоговое окно jQuery UI

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

Опция draggable определяет, сможет ли пользователь перемещать диалоговое окно в пределах окна браузера. По умолчанию значение этой опции равно true, и я рекомендую не менять эту настройку. Благодаря этому пользователь при необходимости всегда сможет увидеть основную часть содержимого, заслоненную диалоговым окном. Это особенно важно, когда диалоговое окно используется для вывода сообщения о возникновении какой-либо ошибки или проблемы. Если опция draggable равна false, то пользователь не сможет сместить диалоговое окно в сторону.

Кроме того, опция draggable может быть полезной в ситуациях, когда вы используете несколько диалоговых окон в одном и том же окне браузера. Я рекомендую всячески этого избегать, но если такая необходимость все-таки возникает, следует принимать меры к тому, чтобы пользователь смог изменять расположение окон, делая доступным для чтения содержимое каждого из них. На небольшом экране диалоговые окна перекрывают друг друга.

Другой полезной опцией является опция stack, которая позволяет задать перемещение диалогового окна на передний план при выполнении на нем щелчка. По умолчанию значением этой опции также является true. Пример использования обеих опций приведен ниже:

$(function() {
	
    // Добавить несколько элементов <div> в окно
	$('body').append($('<div class="dialog" title="Диалоговое окно 2">Это второе диалоговое окно</div>'))
	         .append($('<div class="dialog" title="Диалоговое окно 3">Это третье диалоговое окно</div>'))
			 
	$('.dialog').add('#dialog').dialog({
		// Указывать эти опции для значения true необязательно, здесь они указаны для демонстрации
		stack: true,
		draggable: true
	})
			
});

В этом документе создаются три диалоговых окна. Для одного из них мы отключаем опцию draggable, а для другого — опцию stack. Результат представлен на рисунке, но по-настоящему понять, насколько неудачны внесенные нами изменения, вы сможете только в том случае, если поработаете с документом, открыв его в окне браузера:

Последствия отключения опций draggable и stack

Создание модальных диалоговых окон

Модальное диалоговое окно лишает пользователя возможности взаимодействовать с документом до тех пор, пока оно не будет закрыто. Для создания модального диалогового окна следует использовать опцию modal со значением true, как показано в примере ниже:

$(function() {
	
    // Добавить кнопку в документ
	$('body').append($('<button id="show">Открыть окно</button>').button())
	
	$('#dialog').dialog({
		buttons: [{text: "OK", click: function() {$(this).dialog("close")}}],
		autoOpen: false,
		modal:true
	});
	
	$('#show').click(function(e) {
        $('#dialog').dialog("open")
    });
			
});

В этом примере создается диалоговое окно, которое первоначально невидимо для пользователя. Диалоговое окно отображается в ответ на выполнение пользователем щелчка на кнопке. Результат представлен на рисунке:

Отображение модального диалогового окна

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

Если в само диалоговое окно также добавляются кнопки, то необходимо следить за тем, чтобы для выбора кнопки, которая была добавлена в документ для отображения диалогового окна, не использовался селектор $('button'). Этому селектору соответствуют все кнопки — как добавленные вами, так и созданные при вызове метода dialog(). Это означает, что кнопки диалогового окна будут связаны с тем же обработчиком события click, что и кнопка в документе, а не с функциями-обработчиками, указанными в опции buttons.

Отображение формы в модальном диалоговом окне

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <style type="text/css">
        #dialog input {width: 150px; margin: 5px; text-align: left}
        #dialog label {display:inline-block; width: 120px}
        table {border-collapse: collapse; border: thin solid black; margin: 10px}
        #placeholder {text-align: center}
        #show {margin: 10px}
        td, th {padding: 5px; width: 100px}
    </style>
    <script type="text/javascript">
$(function() {
	
    $('#dialog').dialog({
        buttons: [{text: "OK", click: addDataToTable}],
        modal: true,
        autoOpen: false,
        width: 340
    })
    
    $('#show').button().click(function() {
        $('#dialog').dialog("open");
    })
    
    function addDataToTable() {
        $('#placeholder').hide();
		
        $('<tr><td>' + $('#product').val() + '</td><td>' + $('#color').val() +
            '</td><td>' + $('#count').val() + '</td></tr>').appendTo('#prods tbody');
			
        $('#dialog').dialog("close");
    }
			
});
    </script>   
</head>
<body>
    <div id="dialog" title="Введите данные" class="ui-widget">
        <div><label for="product">Продукт: </label><input id="product" /></div>
        <div><label for="color">Цвет: </label><input id="color" /></div>
        <div><label for="count">Количество: </label><input id="count" /></div>
    </div>
    <table id="prods" class="ui-widget" border="1">
        <tr><th>Продукт</th><th>Цвет</th><th>Количество</th></tr>
        <tr id="placeholder"><td colspan=3>Ничего не выбрано</td></tr>
    </table>
    <button id="show">Добавить продукт</button>
</body>
</html>

Запустить пример

В этом примере внутри элемента div, на основе которого создается диалоговое окно, определен простой набор элементов input. После щелчка на кнопке, расположенной в документе, отображается диалоговое окно, с помощью которого пользователь может ввести необходимые данные. Когда пользователь щелкнет на кнопке "OK" (которая определена с помощью опции buttons), введенные им данные будут обработаны и добавлены в документ ввиде новой строки в HTML-таблице, как показано на рисунке:

Использование модального диалогового окна для получения данных от пользователя

Я не хотел усложнять этот пример, но в реальных проектах можно применить методики проверки корректности введенных пользователем данных, а также методики Ajax для отправки данных на удаленный сервер.

Отображение формы в модальном диалоговом окне удобно использовать лишь в случае простых форм. Пытаясь сочетать с диалоговым окном вкладки Tabs или панели Accordion, вы рискуете запутать пользователя и вызвать его недовольство. Если заполнение формы требует заметных усилий, то следует подумать о том, чтобы интегрировать ее непосредственно в документ.

Методы виджета Dialog

Методы, поддерживаемые виджетом jQuery UI Dialog, перечислены в таблице ниже:

Методы виджета Dialog
Метод Описание
dialog("destroy") Удаляет виджет Dialog из базового элемента
dialog("disable") Отключает диалоговое окно
dialog("enable") Включает диалоговое окно
dialog("option") Изменяет одну или несколько опций
dialog("close") Закрывает диалоговое окно
dialog("isOpen") Возвращает true, если диалоговое окно видимо на экране
dialog("moveToTop") Перемещает диалоговое окно на вершину стека
dialog("open") Отображает диалоговое окно для пользователя

Как можно было догадаться, большинство этих методов обеспечивают управление диалоговым окном из программы. Разумеется, чаще всего используются методы open и close. Пример использования наиболее важных методов приведен ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
$(function() {
	
    $('#d1, #d2').dialog({
        autoOpen: false,
        position: ["right", "top"]
    }).filter("#d2").dialog("option", "position", ["right", "bottom"])
    
    $('#t1, #t2').button().click(function (e) {
        var target = this.id == "t1" ? "#d1" : "#d2";
        if ($(target).dialog("isOpen")) {
            $(target).dialog("close")
        } else {
            $(target).dialog("open")
        }
    })
			
});
    </script>   
</head>
<body>
    <div id="d1" class="dialog" title="Диалоговое окно 1" class="ui-widget">
        Это первое диалоговое окно
    </div>
    <div id="d2" class="dialog" title="Диалоговое окно 2" class="ui-widget">
        Это второе диалоговое окно
    </div>    
    <div>
        <button id="t1">Вкл/выкл диалоговое<br> окно 1</button>
    </div>
    <button id="t2">Вкл/выкл диалоговое<br> окно 2</button>
</body>
</html>

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

Переключение видимости диалоговых окон с помощью методов виджета Dialog

События виджета Dialog

Виджет Dialog поддерживает события, перечисленные в таблице ниже. Некоторые наиболее полезные события описаны в следующих разделах.

События виджета Dialog
Событие Описание
create Происходит, когда виджет Dialog применяется к базовому HTML-элементу
beforeClose Происходит непосредственно перед закрытием диалогового окна. Возврат значения false функцией—обработчиком события принудительно оставляет диалоговое окно открытым
open Происходит при открытии диалогового окна
focus Происходит при получении фокуса диалоговым окном
dragStart Происходит, когда пользователь начинает перетаскивать диалоговое окно
drag Происходит при каждом перемещении мыши в процессе перетаскивания диалогового окна
dragStop Происходит по окончании перетаскивания пользователем диалогового окна
resizeStart Происходит, когда пользователь начинает изменять размер диалогового окна
resize Происходит при каждом перемещении мыши в процессе изменения размера диалогового окна
resizeStop Происходит по окончании изменения пользователем размеров диалогового окна Происходит при закрытии диалогового окна
close Поддержание диалогового окна в открытом состоянии

Событие beforeclose позволяет получить уведомление о том, что пользователь затребовал закрытие диалогового окна. Это может быть вызвано тем, что пользователь нажал клавишу <Esc> (если опция closeOnEscape установлена равной true), щелкнул на кнопке закрытия, находящейся в правом верхнем углу диалогового окна, или щелкнул на кнопке, добавленной с помощью опции buttons.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <style type="text/css">
	    .ui-widget {width:330px}
        input, label {width: 160px; display:inline-block}
		#send {margin:16px; width:100px !important}
    </style>
    <script type="text/javascript">
$(function() {
	
    var canClose = false;
    var delay = 15;
    
    $('#dialog').dialog({
        modal: true,
        autoOpen: false,
        beforeClose: function() {
            return canClose;
        },
        open: function() {
            var count = delay;
            var intID = setInterval(function() {
               count--;
               $('#time').text(count);
               if (count == 0) {
           clearInterval(intID)
           canClose = true;
           $('#dialog').dialog("close")
               }
            }, 1000)
        }
    })
    
    $('button').button().click(function(e) {
        $('#dialog').dialog("open")
    })
			
});
    </script>   
</head>
<body>
    <div class="ui-widget">
        <label for="user">Имя пользователя: </label><input id="user"/>
        <label for="pass">Пароль: </label><input id="pass"/>
        <button id="send">Войти</button>
    </div>
    <div id="dialog" title="Неверный пароль">
        Введенный вами пароль оказался неверным. Пожалуйста, повторите попытку через 
        <span id="time">15</span> секунд.
    </div>
</body>
</html>

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

Задержка закрытия модального окна

При наступлении события open запускается периодически возобновляемый вызов функции, выполняющей обратный отсчет за 15 секунд. Используя событие beforeClose, мы лишаем пользователя возможности закрыть диалоговое окно в течение этого времени. Спустя 15 секунд вызывается метод close, и диалоговое окно автоматически закрывается. Путем совместного использования событий open и beforeClose мы добиваемся того, что пользователь не сможет сразу же повторить попытку ввода другого имени пользователя или пароля (по крайней мере, без повторной загрузки HTML-документа).

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

Думаю вы обратили внимание, что в виджете Dialog есть кнопка "закрыть", отображающаяся в виде крестика в правом верхнем углу диалогового окна:

Кнопка 'закрыть' виджета Dialog

При клике по ней ожидается закрытие диалогового окна, однако, этого не происходит. Чтобы это исправить вы можете добавить следующий код:

$(function() {
	
    $('#dialog').dialog({
		open: function() {
			$('.ui-dialog-titlebar-close').bind('click', function() {
				$('#dialog').dialog('close');
			})
		}
	});
			
});

Здесь обрабатывается событие open виджета Dialog, в котором к элементу с классом ui-dialog-titlebar-close (это и есть кнопка) добавляется обработчик события click, где и указывается с помощью метода close, что нужно закрыть окно.

Пройди тесты
Лучший чат для C# программистов