Genelde sinir bozucu reklamların yer aldığı sitelerde gördüğümüz popupların nasıl yapıldığını göreceğiz. Javascript ile popup nasıl oluşturulur? Sorusuna yanıt arayacağız. Popup, harici olarak açılan yeni penceredir. Javascript ile bu işlemi window.open methodu ile yapıyoruz.
window.open, üç parametresi bulunmaktadır. İlki gidilecek olan URL, ikincisi ise açılacak olan pencerenin adı veya pencere türü, üçüncüsü ise pencereye ait özelliklerin belirtildiği yerdir. Yapı itibariyle şu şekilde bir yazılışı vardır.
window.open("URL", "Pencere Adı", "Özellikler");
Yukarıdaki gibi bir kullanımı söz konusudur. Bunun dışında sadece url yazılacakta bunu kullanmak mümkündür. Bu durumda yeni sekmede/pencerede girilen url’e gidecektir.
Şimdi kısaca yukarıdaki kullanım ile ilgili bilgileri açıklayarak neler yazılacağını, neler kullanılacağını görelim.
1. Parametre: URL
Bu parametrede açılacak olan sayfada hangi siteye gidileceğini temsil etmektedir. Burada site adresi http etiketi ile yazılmalıdır. http ile site ziyareti yapıldığı gibi ftp ile sunucudaki dosyalara ulaşabilirsiniz.
2. Parametre: Pencere Adı
Bu parametrede isterseniz yeni açılacak olan pencerenin adını girebilir, isterseniz de pencerenin türünü buraya yazabilirsiniz. Şahsen pencere türü yazmak daha mantıklı olacaktır. Pencere türleri ve bu türlerin neler yaptığını da şöyle açıklayalım;
_blank yazarak popup ekranını yeni bir pencerede (tarayıcı penceresi),
_parent ile aynı pencere içerisinde frame şeklinde,
_self ile aynı pencerede standart pencere stilinde,
_top ile mevcut pencerenin üstünde görüntüleyebiliriz.
3. Parametre: Özellikler
Açılacak olan pencerenin şekillendiği, en önemli yeri diyebileceğim alanıdır. Buradan pencerenin konumunu, boyutunu ve pencere özelliğini buradan ayarlıyoruz.
Directories ile yer imlerinin gösterilip gösterilmeyeceğini tanımlarız, bunun değeri “yes”,”no”,1 veya 0 değerlerinden birini alır.
Fullscreen ile tam ekran pencerede açtırabiliriz. Karşılık olarak “yes”,”no”,1 veya 0 değeri verilir.
Location ile web sayfasının adres satırını görüntülenip görüntülenmeyeceğine karar verebiliriz. Eğer site güvenliği gibi bir durum söz konusu ise kullanıcıya link göstermek istemiyorsak bu seçeneği “no” veya 0 olarak belirtiriz.
Menubar ile menü çubuğunun görüntülenip görüntülenmeyeceğini seçebiliriz.
Resizable ile açılacak yeni popup pencerenin boyutunun elle değiştirilip değiştirilemeyeceğine karar verebiliriz.
Scrollbars ile yeni açılan pencerenin sağa-sola ve yukarı-aşağı kaydırma çubuklarının aktif olup olmayacağını belirleyebiliriz. Açılacak yeni pencere içindeki web sayfasının boyutlarını kesin olarak bilmiyorsak bu seçeneği “yes” ya da 1 olarak belirtmemizde fayda var, aksi halde internet kullanıcısı sitenin boyutsal olarak taşması durumunda tamamını görüntüleyemeyebilir.
Titlebar ile popup pencerenin başlık bilgisinin görüntülenip görüntülenmeyeceğine karar verebiliriz.
Toolbar ile popup pencerede ileri-geri-yeniden yükle butonlarının olup olmayacağını belirleyebiliriz.
Status ile popup ile açılacak pencerede durum çubuğunun (tarayıcının altında yer alan kısım) görüntülenip görüntülenmeyeceğini bildirebiliriz.
Height ile yüksekliğini,
Width ile genişliğini,
Left ile ekranın solundan olan uzaklığını,
Top ile ekranın üstten olan uzaklığını belirtebiliriz.
Kullanım ile ilgili açıklamaları geride bırakarak örneklerle pekiştirme işlemine geçelim. Basit örneklerden gelişmiş örneğe doğru bir sırada ilerleyelim.
İlk örnek olarak basit bir örnek ile başlayalım. Sadece url belirterek popup oluşturalım.
<script type="text/javascript">
function git(){
window.open("https://ibrahimcevruk.com");
}
</script>
<button type="submit">Popup</button>
Burada butona tıklatıldığında ibrahimcevruk.com sitesine yönlendirme yapacaktır. Fakat özellik belirtmediğimizden dolayı popup olarak değil de yeni sekmede açacaktır. Böyle bir kullanım çok saçma olacaktır. Çünkü bunun yerine link belirterek de bunu yapabilmekteyiz.
Şimdi ise genişlik, yükseklik ve konum gibi bilgileri vererek tam bir pop-up olmasını sağlayalım.
<script type="text/javascript">
function git(){
window.open("https://ibrahimcevruk.com", "İbrahim'in Sitesi", "width=600,height=400,top=200,left=500");
}
</script>
Yukarıdaki örnek ile genişlik, yükseklik ve konum değerlerini verdik.
