jQuery plugins - Pop Easy
jan 05

Pop Easy

Felugró ablakok egyszerűen

Verzió: 1.0
Kiadás dátuma: 2013
Fejlesztő: Thomas Grauer
Liszensz: nincs adat
  • 2351
  • 10762
  • 0
  • -

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