
Pop Easy
Felugró ablakok egyszerűen
Verzió: | 1.0 |
Kiadás dátuma: | 2013 |
Fejlesztő: | Thomas Grauer |
Liszensz: | nincs adat |
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')