Bevezető
Apró, böngésző független plugin, mellyel modális ablako(ka)t aktiválhatunk. A plugin nem egy teljes értékű lightbox klón, azonban az egyszerűbb feladatokra a kis mérete (1,75KB) miatt inkább ajánlott, mint nagyágyú rokonai.
Implementálás
CSS
<link rel="stylesheet" type="text/css" href="css/reveal.css" />
JavaScript
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>
Használat
A plugin-t kétfélekép építhetjük be oldalunkba.
A gyorsabb/egyszerűbb út az, amikor deklaráció nélkül végezzük el az implementálást. Ez a verzió már a HTML5-re épít: a modális ablakot aktiváló linket egy plusz attribútummal egészítjük ki (data-reveal-id), amely a modális ablak azonosítóját tartalmazza. Ezt a megoldást választva azonban nem tudjuk a plugin paramétereit és ezáltal a plugin működését módosítani.
Példa:
<a href="#" data-reveal-id="modalisAblak">Link szövege</a>
Az implementálás másik módja hagyományos deklaráción keresztül történik. Ennek előnye, hogy a plugin működését képesek vagyunk a paramétereken keresztül módosítani, míg hátránya maga a deklaráció: meg kell írnunk az adott link click() eseménykezelőjét:
$(document).ready(function(){
$('#gomb').click(function(e){
e.preventDefault();
$('#modalisAblak').reveal();
});
});
A modális ablak blokkja:
<div id="modalisAblak" class="reveal-modal">
<p>Tetszőleges tartalom...</p>
<a class="close-reveal-modal">x</a>
</div>
Teljes paraméterlista
- animation: a modális ablak megjelenítéséhez használt animáció ('fade' | 'fadeAndPop' |'none') (alapértelmezett: 'fadeAndPop')
- animationspeed: az animáció sebessége (alapértelmezett: 300)
- closeonbackgroundclick: az overlay területre klikkelésnél a modális ablak bezárásának engedélyezése/tiltása (true | false) (alapértelmezett: true)
- dismissmodalclass: bezárás gomb CSS szelektora (alapértelmezett: 'close-reveal-modal')
