Ve výchozím nastavení je dialog jednoduché plovoucí okno s určeným obsahem, křížkem na zavření okna a možností změnit velikost okna a jeho pozici.

Zprovoznění dialogu

Na dialog potřebujeme samozřejmě samotnou knihovnu a mimo tu soubor jQueryUI.js a dva soubory se stylováním. Zápis v hlavičce pak může vypadat takto:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" 

Že vše funguje si můžeme ověřit přidáním tohoto kódu.

// HTML část
<div id="dialog" title="Základní dialog">
	<p>Toto je základní dialog.</p>
</div>
// atribut title - bude zobrazeno v záhlaví dialogu
// obsah v div#dialog - bude zobrazeno v textu dialogu


// jQuery část
$(function() {
     $( "#dialog" ).dialog();
});

Ukázku najdete zde

Animovaný dialog

Při zobrazování a schovávání dialogu můžeme použít libovolnou animaci, kterou jQuery nebo jQuery UI nabízí.

// HTML část
<div id="dialog" title="Dialog s animací">
	<p>Toto je dialog s animací.</p>
</div>

// jQuery část
$.fx.speeds._default = 1000; // nastavíme výchozí rychlost animace - 1 sekunda
$( "#dialog" ).dialog({
     show: "blind", // animace při zobrazování
     hide: "explode" // animace při zavírání
});

Modální dialog

Dialog také můžeme používat jako modální. To znamená, že když se dialog zobrazí, zablokuje se zbytek stránky, takže uživatel může provádět akce pouze s dialogem, dokud ho nezavře. Zbytek stránky se zaplní obrázekem

// HTML část
<div id="dialog">
Toto je modální dialog. Nemůžeš provádět žádné akce mimo dialog.
</div>

// jQuery část
$( "#dialog" ).dialog({
     height: 140,
     modal: true
});

Tlačítka na dialogu

Do dolní části dialogu můžeme přidávat tlačítka. Můžeme u nich nastavit jejich textový popisek a akci, která se provede po kliknutí na dialog (například jeho zavření, ale může tam být libovolný kód).

$( "#dialog" ).dialog({
     buttons: {
          Ok: function() { // textový popisek tlačítka bude "ok"
              $( this ).dialog("close"); // po kliknutí na ok se dialog zavře
              // používá klíčové slovo this a předdefinovanou funkci dialogu,
              // ale o tom si povíme více dále v článku
              ulozit(); // libovolný další kód...
          },
          Storno: function() { // další tlačítko
              $( this ).dialog("close");
          }
     }
});

Další užitečná přizpůsobení dialogu

V této části článku uvedu seznam nastavení dialogu s krátkým popisem.

• autoOpen - Pokud se nastaví true ("pravda"), tak se dialog otevře při načtení stránky. Pokud hodnotu nenastavíte, okno se samo neotevře.
• draggable - Umožňuje přesouvání dialogu myší, ve výchozím nastavení to je povoleno.
• heigth - výška dialogu
• width - šířka dialogu
• minHeight a minWidth - minimální výška a šířka dialogu
• maxHeight a maxWidth - maximální výška a šířka dialogu
• resizable - Umožňuje měnit velikost okna táhnutím za pravý dolní roh dialogu.
• position - Nastavuje pozici dialogu, např. "center" (uprostřed), "top" - nahoře, nebo můžeme zadat souřadnice, třeba [250, 230]
• title - text, který se zobrazí v horní liště dialogu

Funkce napráci s dialogem

Na práci s dialogem máme připravenou sadu funkcí, s kterými můžeme například dialog zavřít, otevřít nebo přenést do popředí.

• .dialog("open") - otevře dialog
• .dialog("destroy") - zavře dialog
• .diaog("isOpen") - pokud je dialog otevřený, vrací true, jinak false
• .dialog("moveToTop") - přenese dialog do popředí před ostatní dialogy (pokud jsou nějaké otevřené)

S funkcemi pak můžete pracovat třeba takto:

// HTML část
<div id="dialog">
Toto je dialog
</div>

// jQuery část
$("#dialog").dialog("open"); // otevře dialog