Bu yazımda, birçok web sitesinde kullanılan popup mesajlarının veya daha genel ifadeyle popup pencerelerinin nasıl yapıldığını anlatacağım. Popup kodları için Html, Css ve Jquery kullanacağız.
Popup, bir Html öğesine tıklandığında bir pencerenin görünmesi, tekrar aynı Html öğesine tıklandığında ise açılan pencerenin görünmemesi olayıdır.
Kodlarımızı yazdıktan sonra karşımıza aşağıdaki gibi bir popup örneği çıkacak.
Buradaki butona tıkladığımızda efektif bir şekilde popup mesajı karşımıza çıkıyor. Butona ikinci tıkladığımızda ise popup mesajı tekrar kayboluyor.
Örneğimizi basit tutmak amacıyla popup içeriğini yazı olarak ayarladım. Buradaki yazı yerine Html kodları yazarak açılır pencerede o kodların görünmesinide sağlayabilirdik.
Örneğin butona tıklandığında bir resmin efektif olarak açılmasını sağlayabilirdik. Yada bir iletişim formunun açılmasını yapabilirdik.
Kısacası popup mesajı yerine Html ve Css kodlarıyla ne yaparsak onu gösterebilirdik.
Konuyu daha fazla uzatmadan popup kodlarına geçelim.
Html Popup Kodları
|
1 2 3 4 5 6 |
<div class="popup-container"> <button id="popup-btn">Tıkla!</button> <span id="popup-text" class="popup-text">Popup İçeriği</span> </div> |
Css Popup Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style> #popup-btn { border: none; padding: 10px 20px; color: #fff; background-color: cornflowerblue; } .popup-container { position: relative; display: inline-block; cursor: pointer; } .popup-container .show { visibility: visible !important; animation-name: popup-fadeIn; animation-duration: 1s; } .popup-container .popup-text { visibility: hidden; width: 200px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 16px 0px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; } .popup-container .popup-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } @keyframes popup-fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> |
Jquery Popup Kodları
|
1 2 3 4 5 6 7 8 9 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> $(".popup-container").click(function() { $("#popup-text").toggleClass("show"); }); </script> |
Neler yaptığımızı kısaca özetleyecek olursak;
⇒ Tıklanması için bir button, popup mesajı için bir span ve bunları içerisine alan bir div etiketi yazıyoruz. Buradaki span etiketi yerine Html ve Css kodları ile istediğiniz içeriği oluşturabilirsiniz. Örneğin bir iletişim formu vb..
⇒ Butona istediğimiz Css özelliklerini uyguluyoruz. Sonrasında ise span etiketini, visibility özelliği ile gizliyoruz.
⇒ Daha sonra kullanacağımız show class’ı için Css kodları yazıyoruz. Show class’ı hangi Html öğesine yazılırsa görünür olması için visibility özelliğini görünür yapıyoruz. Öğenin görünür oluşunu animasyonlu bir şekilde yapmak için animasyon özelliğini kullanıyoruz.
⇒ Jquery kodlarımızı yazmadan önce Jquery’i CDN olarak projemize dahil ediyoruz.
⇒ Son olarak Jquery’ deki toggleClass metodunu kullanarak butona tıklandığında span etiketinin class’ına “show” class’ını ekliyoruz. Butona tekrar tıklandığında ise “show” class’ını tekrardan kaldırıyoruz.
Kodlarımızı yazdıktan sonra tarayıcıda örneğimizi açalım.
Butona sağ tıklayıp incele dediğimizde kaynak kodlarını görebiliyoruz. Burada dikkat ederseniz span etiketinin class’larında “show” class’ı bulunmuyor.
Butona tıklayalım ve span etiketinin class’larına tekrar bakalım.
Gördüğünüz gibi span etiketinin class’larına “show” class’ı eklendi. Böylece popup içeriğide görünür hale geldi.
Html, Css ve Jquery kullanarak popuplar bu şekilde yapılıyor.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
BOOTSTRAP 4 – TOOLTIP (BOOTSTRAP ARAÇ İPUCU)
BOOTSTRAP 4 – POPOVER KULLANIMI
Yeni bir yazımda görüşmek üzere.
){kind=link}