Ako vytvoriť vyskakovacie okno s jQuery a dialog() widget

popup-window

Potrebujete vytvoriť vyskakovacie okno alebo iné dialógové (plávajúce) okno pomocou jQuery? Dialog() Widget v knižnici jQuery UI umožňuje ľahko vytvoriť vyskakovacie okno, ktoré bude robiť presne to, čo chcete. V tomto článku si povieme, ako použiť jQuery dialog().

jQuery a jQuery UI

jQuery a JavaScript sú veľmi užitočné nástroje pre vývoj webových aplikácií. jQuery predstavuje knižnicu, ktorá pridáva veľa užitočných možností pre JavaScript; jQuery UI je knižnica prvkov užívateľského rozhrania pre jQuery (tiež zadarmo a open-source ako jQuery). Ak chcete použiť jQuery alebo jQuery UI vo svojich projektoch, môžete si tieto knižnice stiahnuť a vo svojom projekte použiť lokálne súbory alebo ako si vytvoríte odkaz na verejne dostupné on-line externé zdroje, ako v tomto príklade:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Základná syntax pre používanie väčšiny príkazov jQuery vyzerá takto:

$("vyber_nieco").urob_nieco(parametre, funkcie, atd.);

Príklady z jQuery, ktoré budem uvádzať, sú väčšinu vo vnútri funkcie používané metódu jQuery ready() – t.j. samotný kód jQuery sa spustí len vtedy, keď je táto stránka plne načítaná:

$(document).ready(function(){...});

jQuery Dialog() Widget

Dialog() Widget je súčasťou knižnice jQuery UI. Môžete ho použiť rovnako ako je typický spôsob jQuery – čiže jeho syntax bude súčasťou „.urob_nieco“ ako vo vyššie uvedenom príklade.

Vzhľadom na to, že je dialog() súčasť knižnice UI (user interface = užívateľské rozhranie), je potrebné pripojiť túto knižnicu jQuery UI rovnako, ako v prípade jQuery:

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Dialog() Widget (rovnako ako mnoho prvkov jQuery UI) musí byť tiež spojený s témou (.css), pretože potrebuje niekoľko grafických prvkov, aby užívateľské rozhranie fungovalo korektne. Témy si môžete stiahnuť z oficiálnych stránok jQuery UI alebo z iných miest, a prípadne ich upraviť a prispôsobiť si ich svojim požiadavkám. Alebo si ich môžete vložiť do svojho projektu z externého zdroja, ako v tomto príklade:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

Vyskakovacie okno (popup/modal window)

Je čas, aby sme sa pustili do práce a ukázali si dialog() widget v praxi. Nasledujúci kód umožňuje užívateľovi otvoriť dialógové okno:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script>
     $(document).ready(function(){
         $( "#hello" ).dialog({ autoOpen: false });
         $( "#openWin" ).click(function() {
               $( "#hello" ).dialog( "open" );
         });
     });
  </script>
</head>
<body>
  <button id="openWin">Otvor okno</button>
  <div id="hello" title="Ahoj">
     <p>Ahoj, ja len poviem: Dobrý den!</p>
  </div>
</body>
</html>

Keď používateľ klikne na tlačidlo „Otvor okno“ – zobrazí sa dialógové okno uprostred stránky s názvom „Ahoj!“ a textom „Ahoj, ja len poviem: Dobrý deň!“. Toto dialógové okno môže používateľ kliknutím na krížik v pravom hornom rohu zatvoriť.

Otvorenie vyskakovacieho okna dialog()

V provom riadku kódu sme povedali, aby sa DIV „hello“ neotvoril automaticky po načítaní stránky (autoOpen: false):

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

Chceme, aby sa okno otvorilo až po kliknutí na tlačítko – preto pridáme click() function:

$( "#openWin" ).click(function() {
    $( "#hello" ).dialog( "open" );
});

Animácia vyskakovacieho okna

K dialog() môžeme priradiť akýkoľvek efekt, ktorý používa jQuery UI – napríklad:

$( "#hallo" ).dialog({
     autoOpen: false,
     show: {
            effect: "blind",
            duration: 1000
     },
     hide: {
            effect: "explode",
            duration: 1000
     }
});
$( "#openWin" ).click(function() {
     $( "#hallo" ).dialog( "open" );
});

Zobraziť vyskakovacie okno po načítaní stránky

Pokiaľ chceme zobraziť vyskakovacie okno ihneď po načítaní stránky – kód by vyzeral asi takto:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script>
     $(document).ready(function(){
         $("#hello").dialog({ 
             autoOpen: true,
             resizable: false
         });
     });
  </script>
</head>
<body>
  <div id="hello" title="Ahoj">
     <p>Ahoj, ja len poviem: Dobrý deň!</p>
  </div>
</body>
</html>

Viac o možnostiach jQuery dialog() si môžete prečítať na oficiálnych stránkach jQuery UI.