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>