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.
Modal boxy sú často používaným nástrojom v internetovom arzenále webového vývojára. Používajú sa na veľa rôznych vecí: napr. na formuláre prihlásenia / registrácie, zobrazenie reklamy alebo obrázkov / videa, prípadne na oznámenia / upozornenia pre užívate
/*! elementor - v3.5.3 - 28-12-2021 */ .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .el
prejsť na článok/*! elementor - v3.15.0 - 20-08-2023 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;bo
Ako prispôsobím klávesové skratky v AutoCAD/GstarCAD Pomocou príkazu CUSTACC si vyvoláte dialógové okno, ktoré je venované príkazovým skratkám. K tomuto dialógovému oknu sa dostanete aj cez záložku Správa > Upravuje nastavení > Při
prejsť na článokUrčite už každý z nás aspoň raz riešil otázku či e-mail, ktorý som odoslal, bol príjemcom otvorený. Prípadne, či klikol na webový odkaz, ktorý sme mu v texte e-mailu poslali. Alebo by sme len jednoducho radi vedeli, kedy si ten-ktorý e-mail náš adresát p
prejsť na článok