JQuery ile Popup Yapımı (Popup Kodları)

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.

popup-kodlari

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ı 

Css Popup Kodları 

Jquery Popup Kodları 

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.

html-popup-kodu

Butona tıklayalım ve span etiketinin class’larına tekrar bakalım.

css-popup-kodu

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.

Css ile Tooltip Yapımı

BOOTSTRAP 4 – TOOLTIP (BOOTSTRAP ARAÇ İPUCU)

BOOTSTRAP 4 – POPOVER KULLANIMI

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link