Pop Easy

Bevezető

A Pop Esay plugin a kis méretével (kevesebb, mint 2kb) igen hasznos eszköz lehet felugró/modális ablakok létrehozásában. A paraméterek segítségével részletesen beállíthatjuk az ablakok működését/viselkedését, továbbá a plugin többféle HTML tartalom megjelenítésére is alkalmas: form, video, stb.

Implementálás

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.modal.min.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('.modalLink').modal();
            });
          

Használat

Hozzuk létre az overlay réteget és a modális ablakot a kívánt tartalommal, majd pedig a linket, amely a modális ablak azonosítójára hivatkozik:

            <div class="overlay"></div>

            <div id="pelda" class="modal"> ... </div>

            <a class="modalLink" href="#pelda">Ablak megnyitása</a>
          

Teljes paraméterlista

• trigger: Az ablak aktiválását kiváltó link vagy gomb CSS osztálya/azonosítója
  (alapértelmezett: '.modalLink')
• olay: Az overlay réteg CSS osztálya/azonosítója (alapértelmezett: 'div.overlay')
• modals: A modális ablak CSS osztálya/azonosítója (alapértelmezett: div.modal)
• animationEffect: Az overlay réteg animációja ('slideDown' | 'fadeIn') (alapértelmezett: 'slidedown')
• animationSpeed: Az overlay réteg és a modális ablak megjelenítésének sebessége/időtartama
  ('slow' | 'normal' | 'fast' | érték milliszekundumban) (alapértelmezett: 400)
• moveModalSpeed: A képernyő méretváltozása esetén a modális ablak középre igazításának sebessége/időtartama ('slow' | 'normal' | 'fast' | érték milliszekundumban) (alapértelmezett: 'slow')
• background: Az overlay réteg színének hexadecimális kódja (alapértelmezett: '000000')
• opacity: Az overlay réteg áttetszőségének értéke [0..1] (alapértelmezett: 0.8)
• openOnLoad: Modális ablak aktiválásának engedélyezése/tiltása az oldal betöltődésekor
  (false | true) (alapértelmezett: false)
• docClose: Modális ablak bezárásának engedélyezése/tiltása az overlay rétegen történő klikkeléskor (false | true) (alapértelmezett: true)
• closeByEscape: Modális ablak bezárásának engedélyezése/tiltása Escape billentyűvel
  (false | true) (alapértelmezett: true)
• moveOnScroll: Modális ablak újrapozícionálásának engedélyezése/tiltása az oldal görgetésekor (false | true) (alapértelmezett: true)
• resizeWindow: Modális ablak középre pozícionálásának engedélyezése/tiltása a böngészőablak újraméretezésekor (false | true) (alapértelmezett: true)
• video: Video URL-je (alapértelmezett: 'demo')
• videoClass: Video CSS osztálya (alapértelmezett: 'video')
• close: 'Bezárás' gomb CSS osztálya/azonosítója (alapértelmezett: '.closeBtn')