Пример использования

$(document).ready(function() {

   $("#tabs").tabs();
   $("#ftab").click(function(){$("#dial").dialog("open");});
   $("#ftab").click(function(){$("#dial2,#dial3").dialog("close");});
   $("#stab").click(function(){$("#dial2").dialog("open");});
   $("#stab").click(function(){$("#dial,#dial3").dialog("close");});
   $("#ttab").click(function(){$("#dial3").dialog("open");});
   $("#ttab").click(function(){$("#dial,#dial2").dialog("close");});

//Код первой вкладки (стандартное использование)
   $("#dial").dialog({width:400,height:210});
//Код второй вкладки (модальное окно)
   $("#dial2").dialog({modal:true,
   width:400,
   height:200,
   autoOpen:false});
//Код третьей вкладки (диалоговое окно с кнопками)
   $("#dial3").dialog({buttons:{"Да":function(){
      $(this).dialog("close");
      $("#result").html("Вы любите фильмы с Брюсом Ли!")},
      "Нет":function(){
         $(this).dialog("close");
         $("#result").html("Вы не любите фильмы с Брюсом Ли.")}},
      width:400,
      height:210,
      autoOpen:false});
   });

Определение и использование

С помощью метода dialog Вы можете превратить выбранный элемент в диалоговое окно.

Диалоговое окно - это окно отображающееся поверх текста страницы и содержащее заголовок и поле с содержимым.

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

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

Метод .dialog("open") позволяет отрыть диалоговое окно, а метод .dialog("close") закрыть его.

Синтаксис

$(селектор).dialog(опции_или_события)

селектор выбирает элемент, который будет превращен в диалоговое окно.

опции настраивают дополнительные аспекты поведения диалогового окна.

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

Опции

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Синтаксис

$(селектор).dialog({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("dialogсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к виджету с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").dialog({create:function(event,ui){alert("Привет")}}).