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ľa. Vyskakovacie (modálne) okná sa často používajú na zobrazenie dôležitých informácií, ktoré sú bežne vytvorené JavaScriptom. My sa však pokúsime JavaScript nechať v „šuplíku“ a na zobrazenie vyskakovacieho okna použijeme HTML5 a CSS3. Na vytvorenie veľmi pekného a funkčného vyskakovacieho okna použijeme z CSS: transition, opacity, pointer-event a background gradient. HTML Prvým krokom k vytvoreniu nášho modálneho okna je jednoduchý layout: <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Modal Box</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> Vytvoríme si jednoduchý odkaz „Open Modal“ a naše vyskakovacie okno bude tvoriť DIV s id=openModal. Vnútri tohto div budeme mať odkaz zatvorenie okna (Close) a samotný obsah okna – v našom prípade nejaký nadpis H1 a dva odstavce textu. Vytvárame CSS pre vyskakovacie okno Najskôr si vytvoríme triedu modalDialog, ktorá predstavuje prekrytie celého okna prehliadača: .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } Triede .modalDialog sme určili pevnú (fixnú) pozíciu a nastavili sme odsadenia top, left, bottom a right na nulu – takže naše tmavé pozadie sa bude zobrazovať cez celé okno prehliadača. Funkčnosť a vzhľad vyskakovacieho okna Teraz pridáme našu :target pseudo triedu. .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } S našou :target pseudo triedou sme si stanovili, že po kliknutí na odkaz sa naše modálne okno zobrazí. A nakoniec sme si naštýlovali DIV samotného vyskakovacieho okna nastavením šírky, polohy, odsadenia a farebného prechodu pozadia. Zatvorenie vyskakovacieho okna Keď sme si vytvorili štýl pre vyskakovacie okno – ostáva už len tlačítko pre zatvorenie okna. Prostredníctvom CSS3 a HTML5 môžeme vytvárať tlačidlá, ktoré vyzerajú ako obrázky, no v skutočnosti nie sú. .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } Pre naše zatváracie tlačidlo nastavíme pozadie, pozíciu tlačítka určíme ako absolute a posunieme ho kúsok hore a vpravo (top a right). Pomocou border-radius vytvoríme okolo písmenka X polomer kruhu a nastavíme mu, aby vrhal mierny tieň. Následne pridáme modré pozadie, ktoré sa zobrazí pri nabehnutí kurzora myši na tlačítko. Prečo je naše vyskakovacie okno lepšie? Vytvorili sme vyskakovacie okno len prostredníctvom HTML5 a CSS3. A i keď na webe je množstvo príkladov, ako vytvoriť vyskakovacie okno prostredníctvom JavaScriptu (a štatistiky ukazujú, že len 2% ľudí na celom svete si prezerajú web s vypnutým JavaScriptom) – je naše riešenie „čistejšie“. Použili sme len tri riadky kódu, aby sme vytvorili animáciu. Ak by sme to mali porovnať s použitím akejkoľvek JavaScript knižnice, budete šokovaný tým, ako veľmi je náš kód minimalizovaný. A nakoniec HTML5 a CSS3 sú budúcnosť. Všetci sa snažia začleniť ich do svojich návrhov a projektov, a ich používanie pomáha ich rozšíreniu. Použitím HTML5 a CSS3 získate čistejšie kód, nemusíte sa starať o knižnice JavaScriptu takže nie je žiadny dôvod, prečo ich používať. A tu je náš kompletný kód, prípadne si môžete pozrieť DEMO v akcii. <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <title>Vyskakovacie okno pomocou CSS3 a HTML5</title> <style> .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } </style> </head> <body> <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Modal Window</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </body> </html>
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
Now that you know what a Data type is and why it is important to choose the right one, you can explore more of the available Data types in Flowis and what kind of possibilities they offer you. Date-related Data types Date Data type contains only dat
prejsť na článokV CSS3 sú dva spôsoby, ako vytvoriť animáciu: CSS Transitions, ktoré nám umožňujú vytvoriť niektoré jednoduché efekty (ako je napr. :hover) alebo CSS Animations, prostredníctvom ktorých môžeme vytvárať zložitejšie efekty. Zdá sa vám, že vytvorenie peknej
Urč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ánokHeadings Header one Header two Header three Header four Header five Header six Blockquotes Single line blockquote: Stay hungry. Stay foolish. Multi line blockquote with a cite reference: People think focus means saying yes to the thing youve got to focus
prejsť na článok