Jquery Popup Yapımı
Jquery Popup Yapımı konusu, web tasarımının önemli bir unsuru olan popup pencerelerini nasıl oluşturabileceğinizi anlatan bir makaledir. Bu yazıda, açılıp kapanabilen ve kullanıcıyla etkileşimli çalışma sağlayan popup pencerelerin nasıl oluşturulduğunu öğreneceksiniz.
Popup pencereleri, web sitelerinde genellikle bilgilendirici mesajlar, reklamlar veya önemli duyurular gibi içerikleri göstermek için kullanılır. Bu pencereler, kullanıcıların dikkatini çekmek ve önemli bilgileri iletmek için oldukça etkili bir araçtır.
Jquery kütüphanesi, web tasarımcıların bu tür popup pencerelerini kolaylıkla oluşturmasını sağlar. Jquery, JavaScript’in güçlü bir kütüphanesidir ve web sayfalarında çeşitli etkileşimli öğeler oluşturmak için sıklıkla kullanılır.
Jquery Popup Yapımı için öncelikle JQuery kütüphanesini web sayfanıza dahil etmelisiniz. Bu işlem için aşağıdaki kodu HTML sayfanızın head bölümüne eklemeniz yeterlidir:
“`html
“`
Daha sonra, popup penceremizin görüntüleneceği bir buton veya bağlantı eklememiz gerekmektedir. Bu örnekte, “Popup Aç” adında bir buton kullanacağız:
“`html
“`
Bu butona tıkladığımızda popup penceremizin görüntülenmesi için JavaScript kodumuzu yazmamız gerekiyor. Aşağıdaki kodu JavaScript dosyanıza ekleyerek bu işlemi gerçekleştirebilirsiniz:
“`javascript
$(document).ready(function(){
$(“#popupButton”).click(function(){
$(“#popupDiv”).fadeIn();
});
});
“`
Yukarıdaki kodda, `$(“#popupButton”)` ifadesi, butona yapılan tıklamayı yakalar. `$(“#popupDiv”).fadeIn();` ifadesi ise popup penceresini ekranda görünür hale getirir.
HTML dosyanıza `
“`html
Popup Başlığı
Bu bir popup içeriği örneğidir.
“`
CSS dosyanızda aşağıdaki gibi stil tanımlamalarını yapabilirsiniz:
“`css
#popupDiv {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
z-index:9999;
text-align:center;
padding-top:200px;
color:#fff;
}
#popupDiv h2 {
font-size:24px;
}
#closeButton {
padding:10px 20px;
background-color:#333;
border:none;
color:#fff;
font-size:16px;
margin-top:20px;
}
“`
Yukarıdaki CSS kodu, popup penceresinin stilini ve görünümünü tanımlar. Örnekte, popup penceresi tam ekran kaplamasını sağlamak için `position:fixed;`, kapatma butonu için `#closeButton` özellikleri tanımlanmıştır.
Son olarak, JavaScript kodumuza kapatma butonunun işlevini ekleyelim:
“`javascript
$(“#closeButton”).click(function(){
$(“#popupDiv”).fadeOut();
});
“`
Bu kod, kapatma butonuna yapılan tıklamayı yakalar ve popup penceresini ekrandan kaybolmasını sağlar.
Bu şekilde, Jquery kullanarak popup pencereleri oluşturabilirsiniz. Popup penceresinin içeriğini istediğiniz gibi değiştirebilir ve görsel öğeler ekleyebilirsiniz.
Jquery Popup Yapımı yazımızda, Jquery kullanarak açılır pencereler oluşturmayı öğrendiniz. Bu pencereleri web sitenize entegre ederek etkili bir şekilde bilgi iletebilir ve kullanıcı etkileşimini artırabilirsiniz. Jquery’nin güçlü özelliklerinden faydalanarak, web tasarımında fark yaratmanızı ve kullanıcıları etkilemenizi sağlar.
