• Címkék:
  • popup
  • window
  • ablak
  • felugró
  • lightbox
  • modális

Pop Easy

Deklaráció

        $(document).ready(function(){
          $('.modalLink').modal({
            animationEffect: 'fadeIn',
            background: 'ffffff',
            videoClass:'video',
            video:'http://player.vimeo.com/video/42847549?color=eb5a3d',
            moveOnScroll:false,
          });
        });
      

1. Példa - Egyszerű felugró ablak

Ablak megnyitása

HTML kód

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

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

        <div id="pelda-1" class="modal">
          <div class="modalHeader">1. példa</div>
          <div class="modalContent">
            <h2>Egyszerű Pop Easy ablak</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas venenatis
              bibendum. Suspendisse pulvinar neque malesuada tempus aliquet. Fusce sit amet dapibus
              nibh. Aliquam scelerisque, ante sed viverra accumsan, massa nunc mattis nibh, ut sodales
              felis arcu at turpis.
            </p>
            <a href="#" class="closeBtn" title="Bezár"> </a>
          </div>
        </div>
      

2. Példa - Több felugró ablak

Ablak megnyitása

HTML kód

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

        <div id="pelda21" class="modal">
          <div class="modalHeader">2. példa</div>
          <div class="modalContent">
            <h2>Bejelentkezés</h2>
            <form action="#" method="post" class="formLogin">
              <p>
                <label for="uname">Felhasználónév</label>
                <input type="text" class="inputbox" id="uname" name="uname" value="" />
              </p>
              <p>
                <label for="psw">Jelszó</label>
                <input type="password" class="inputbox" id="psw" name="psw" value="" />
              </p>
              <p>
                <input type="submit" class="btnSubmit" name="submit" value="Belépés" />
              </p>
            </form>
            <a class="modalLink forgotten" href="#pelda22">Elfelejtett jelszó</a>
            <a href="#" class="closeBtn" title="Bezár"> </a>
          </div>
        </div>

        <div id="pelda22" class="modal">
          <div class="modalHeader">2. példa</div>
          <div class="modalContent">
            <h2>Elfelejtett jelszó</h2>
            <p>
              Új jelszó igényléséhez adja meg az E-mail címét!
            </p>
            <form action="#" method="post" class="formPassword">
              <p>
                <label for="email">E-mail cím</label>
                <input type="text" class="inputbox" id="email" name="email" value="" />
              </p>
              <p>
                <input type="submit" class="btnSubmit" name="submit" value="Új jelszó" />
              </p>
            </form>
            <a href="#" class="closeBtn" title="Bezár"> </a>
          </div>
        </div>
      

3. Példa - Videó

Ablak megnyitása

Videó beágyazásnál fontos, hogy a deklarációban is megadjuk a videó elérési útvonalát (video paraméter), illetve definiáljuk a videót tartalmazó iFrame CSS osztályát (videoClass paraméter). Ezen felül beágyazott iFrame esetén ajánlott lehet még a moveOnScroll paramétert letiltani.

HTML kód

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

        <div id="pelda3" class="modal">
          <div class="modalHeader">3. példa</div>
          <div class="modalContent">
            <iframe class="video" src="http://player.vimeo.com/video/42847549?color=eb5a3d" width="458" height="258" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <a href="#" class="closeBtn" title="Bezár"> </a>
          </div>
        </div>
      

4. Példa - iFrame

Ablak megnyitása

HTML kód

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

        <div id="pelda4" class="modal">
          <div class="modalHeader">4. példa</div>
          <div class="modalContent">
            <iframe width="458" height="281" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=hu&geocode=&q=budapest&aq=&sll=37.09024,-95.712891&sspn=60.288153,135.263672&ie=UTF8&hq=&hnear=Budapest,+Magyarorsz%C3%A1g&t=m&ll=47.49772,19.039993&spn=0.130358,0.293884&z=11&iwloc=A&output=embed"></iframe>
            <a href="#" class="closeBtn" title="Bezár"> </a>
          </div>
        </div>
      

« bezár