jQuery plugins - Reveal
feb 18

Reveal

Modális ablak pofonegyszerűen

Verzió: 1.0
Kiadás dátuma: 2010
Fejlesztő: ZURB
Liszensz: MIT
  • 3436
  • 13914
  • 0
  • -

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')