Jonathan Smiley tarafından jQuery için hazırlanmış olan Dojo Reveal Plugin. Bu eklenti sayesinde popup açılmasını istediğiniz nesnelere fade ve yukardan inen animasyon etkisi kullanarak görsellik verebilir yada bu etkiler olmadan facebook benzeri pop-up açılma pencereleri oluşturabilirsiniz. Pop-up pencere açıldığı an sayfada biraz kararma oluşuyor birinci demoda. İkinci demoda ise pop-up dışında kalan bölümler kapkaranlık bir hal alıyor.
Kullanım
- Head etiketleri arasına eklenecek olan bölümler.
Js dosya adresleri
<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="jquery.reveal.js"></script>
Css :
<style type="text/css">
body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
</style>
- Body etiketleri arasına eklenecek olan kısım.
Html :
<a href="#" class="big-link" data-reveal-id="myModal"> Fade and Pop </a> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> Fade </a> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"> None </a> <div id="myModal" class="reveal-modal"> <h1>Reveal Modal Goodness</h1> <p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p> <a class="close-reveal-modal">×</a> </div>