Modal window demo

Widget pro vyrobení modálního okna. Okno může být v jednu chvíli otevřeno pouze jedno. Všechna vytvořená okna sdílí jeden prvek overlay (překrytí stránky). Použití je jednoduché, okno přijímá pouze dva parametry: obsah okna (string nebo element) a nepovinný objekt s konfigurací. HTML okna a překrytí se tvoří co nejpozději - až při prvním otevření okna.

Okno kromě toho, že fakt dobře vypadá, je chytré a umí se dobře zobrazovat a pozicovat i na menších displejích. Není problém, když se fixně pozicované okno nevejde celé do viditelné části dokumentu - vytvoří se scrollbary kolem jeho obsahu. Doporučuji tuhle featuru vyzkoušet s tímto demem. Pro starší androidy (< 4), které mají často problém s fixním pozicováním, je vynuceno absolutní pozicování (i pro overlay).

Co se dá všechno nastavit

//defaultni conf:
var conf = {
    winId: '',                  //id okna
    winClass: [],               //string || array - trida okna
    overlayClass: [],           //string || array - trida overlay
    closeContent: '',           //string || element - obsah zaviraciho prvku
    winFixed: true,             //fixed nebo absolute pozicovani okna
    closeActions: true,         //pridat defaultni zaviraci akce (ESC, klik overlay, klik zaviraci prvek)
    bordersImgSupport: 'never', //'never', 'always', 'dumb' - pridat podporu pro obrazkove okraje? (tabulka kolem)
    bordersImg: '',             //sprite obrazek, vyuzije se pouze pri pouziti obrazkovych okraju
    bordersWidth: [0,0,0,0]     //number || array - sirka okraju tvorenych sprite obrazkem [horni,pravy,dolni,levy okraj]
};

Interface

Veřejné metody stručně

Vysílané signály

Ukázky

Poznámka: proměnná html je v ukázce kódu uvedena pouze u prvních 2 příkladů.

1. Základní okno

ukaž mi to ukaž mi to var conf = {winId: 'window1', closeContent: 'X'}; var html = '<span class="title">Nejtrapnější jednoduché okno</span>' + conf2html(conf); var mw_ex1 = new JAK.ModalWindow(html, conf); mw_ex1.addOpenElements( JAK.query('.opensMwBasic') );

2. Všude pěkné základní okno

V prohlížečích podporujících CSS3 (border-radius, box-shadow) je rámeček okna vykreslen pomocí CSS. V hloupých prohlížečích je html okna obaleno do tabulky, díky které se dá pěkný rámeček vytvořit pomocí sprite obrázku. Pokud je zadán obrázek a šířka okrajů (což je tento případ), celé se to magicky nastyluje samo. Okno samotné má v tomto případě navíc třídu "mw-imgBorders". Vyzkoušejte v IE8- !

zobrazit okno var conf = { winClass: 'bordersOrange', bordersImgSupport: 'dumb', //zapnout podporu pro obrazkove okraje jen pro hloupe prohlizece bordersImg: 'img/mw_sprite_orange.png', bordersWidth: 70 }; var mw_ex2 = new JAK.ModalWindow('', conf); //zatim prazdne okno   var css3 = !mw_ex2._bordersImgSupport(); //z pouziti teto metody takhle si neberte priklad var html = '<span class="title">Všude pěkné základní okno</span>' + '<p>Dostatečná podpora CSS3: ' + (css3? '<span class="yes">ANO</span>' : '<span class="no">NE</span> (okno je obaleno tabulkou)') + '</p>' + conf2html(conf);   mw_ex2.setContent(html); mw_ex2.addOpenElements('mwPrettyLink');

3. Absolutně pozicované okno

Okno je pozicováno absolutně. Na rozdíl od fixně pozicovaného okna, pokud se nevejde do viditelné části dokumentu, neupravují se rozměry obsahu a neobjevují se scrollbary. Tento příklad navíc ukazuje možnost nastavit vlastní třídu pro overlay a alternativní textový vzhled zavíracího prvku. Vzhled okna je definován pouze pomocí CSS, ve starých prohlížečích je to poněkud hranaté.

zobrazit okno var conf = { winClass: 'bordersOrange textCloseButton', //vice trid okna se dá definovat i takto overlayClass: 'turquoise', closeContent: 'zavřít', winFixed: false //absolutne pozicovane okno }; var mw_ex3 = new JAK.ModalWindow(html, conf); var openElm = JAK.gel('mwAbsoluteLink'); mw_ex3.addOpenElements(openElm);

4. Obrázkové okraje a vlastní akce na obsahu, ukázka zapínání/vypínání reakce na escape

zobrazit okno var conf = { winClass: 'bordersOrange2', bordersImgSupport: 'always', //okno bude vzdy obaleno v tabulce bordersImg: 'img/mw_sprite_orange2.png', bordersWidth: [15, 42, 66, 26] //ruzne sirky okraju }; var mw_ex4 = new JAK.ModalWindow(html, conf); mw_ex4.addOpenElements('mwImgBordersLink');   var example4_addContentEvents = function(signal) { var mw = signal.target; example4_updEscStatus(mw);   //prvky v okne, ktere neco alertuji var alerts = mw.getContainer().querySelectorAll('.alert'); for (var i = 0; i < alerts.length; i++) { JAK.Events.addListener(alerts[i], 'click', function(e,elm) { JAK.Events.cancelDef(e); alert(elm.tagName + ": jupí!!"); }); } //vypinani esc JAK.Events.addListener(mw.getContainer().querySelector('.disableEsc'), 'click', function(e,elm) { JAK.Events.cancelDef(e); mw.disableEsc(); example4_updEscStatus(mw); }); //zapinani esc JAK.Events.addListener(mw.getContainer().querySelector('.enableEsc'), 'click', function(e,elm) { JAK.Events.cancelDef(e); mw.enableEsc(); example4_updEscStatus(mw); }); } /* naveseni udalosti se vykona hned po vybuildeni okna */ JAK.signals.addListener(window, 'mw-built', 'example4_addContentEvents', mw_ex4);

5. S potvrzovacím tlačítkem

Okno a overlay mají zakázány defaultní zavírací akce, okno jde zavřít pouze nějakým vlastním zavíracím prvkem.

zobrazit okno
taky zobrazit okno var conf = { winClass: 'bordersOrange noClose', closeActions: false }; var mw_ex5 = new JAK.ModalWindow(html, conf); mw_ex5.addOpenElements(['mwSubmitLink1', 'mwSubmitLink2']);   /* vlastni zavirani */ var example5_addContentEvents = function(signal) { var mw = signal.target; JAK.Events.addListener(JAK.gel('ex5_submit'), 'click', function(e) { JAK.Events.cancelDef(e); mw.close(); }); } /* naveseni udalosti se vykona hned po vybuildeni okna */ JAK.signals.addListener(window, 'mw-built', 'example5_addContentEvents', mw_ex5);

6. Automatická šířka obsahu

Demonstruje chování fixed okna, pokud nemá obsah zadanou pevnou šířku.

zobrazit okno var conf = { winClass: 'bordersOrange autoWidth' }; var mw_ex6 = new JAK.ModalWindow(html, conf); mw_ex6.addOpenElements('mwLink6');