JavaScript ile Popup Pencereleri

Popup pencereleri bir sayfa içinde ek bir pencere açma işlemidir. Popup pencereler JavaScript kullanarak açılırlar.
Popup pencereler yaygın olarak reklam göstermek amacıyla kullanılır. Diğer bir kullanım amacı ise yardım sayfaları tasarlamak içindir. İhtiyacınız doğrultusunda farklı amaçlar için kullanılabilirler.
Popup pencereler; Sayfa yüklenmesinde,Sayfadan çıkıldığında,Kullanıcı bir linki tıkladığında açılabilir.
Sayfa yüklenirken veya kapatılırken bir popup açmak için body etiketi içine aşağıdaki kodu yazmanız yeterlidir.
Sayfa yüklenirken
<body onload=”javascript: alert(Load işlemi!’)”>
Sayfa Kapatılırken
<body onunload=”javascript: alert(‘UnLoad işlemi!’)”>
Link tıklandığında
<a href=”javascript: alert(‘link Tıklandı!’)”>Popup Aç!</a>
 
Popup olarak yeni bir pencere açmak istiyorsak window.open() metodunu kullanırız. Window.open metodunu URL parametresine bir sayfanın adresini yazdığımızda bu sayfa popup içerisinde açılır, URL nesnesini boş bıraktığımızda ise boş bir popup pencere açılır.
 
window.open Metodunun Kullanımı
window.open(URL,Pencere_Adı [, Pencere_Özellikleri])
URL
Yeni pencerede açılacak olan sayfanın URL bilgisi. Bu parametre boş olabilir.
Pencere_Adi
Açılacak olan pencereye verilecek olan isim, bu isim açılan pencereye referans olarak kullanılabilir.
Pencere_Özellikleri
Açılacak olan pencerenin özelliklerini belirleyeceğimiz string ifade. Bu parametre ile açılacak olan pencerenin durum çubuğu,adres çubuğu gibi özelliklerini ayarlayabiliriz.
Aşağıdaki kod standart özelliklere sahip bir popup penceresi açar
window.open(“http://www.paylasimevi.com”, “yenipencere”); 
Not: window.open() kullanarak açacağımız bir pencere popup engelleyicilere takılabilir.
Popup Pencerenin Özelliklerini Değiştirmek
Window.open() metodunun son parametresini kullanarak açmak istediğiniz popup’ın özelliklerini değiştirebilirsiniz. Aşağıdaki kod durum çubuğu olan ve diğer özellikleri taşımayan bir popup açar.
window.open(“http://www.paylasimevi.com”, “yenipencere”, “status=1”);
 
Popu pencerenin özelliklerini aşağıdaki listede bulunan parametreleri kullanarak değiştirebilirsiniz.
Parametre
Açıklama
status
Pencerenin altında bulunan durum çubuğu
toolbar
Browserın standart araç çubuğu. Örneğin ileri geri butonu.
location
Adres Çubuğu.
menubar
Pencerenin Menüsü
directories
Browserin standart klasör butonları.
resizable
Kullanıcı açılan popup boyutunu değiştirebilirmi.
scrollbars
Eğer açılan sayfa popup içine sığmazsa scroll bar çıkacakmı?
height
Pencerenin pixel cinsinden yüksekliği (Örneğin:height=’350′)
width
Pencerenin pixel cinsinden genişliği (Örneğin:width=’350′)
 
Örnekler:
1 – Aşağıdaki kod menü barı olan bir pencere açar. Açılan pencere boyutu değiştirilebilir ve 350 pixel genişliğinde, 250 pixel yüksekliğindedir.
 
window.open(“http://www.paylasimevi.com”,
“yenipencere”, “menubar=1,resizable=1,width=350,height=250”);
 
2- Adres Çubuğu, durum çubuğu ve scroll bari olan 100×100 boyutunda bir popup açar.
window.open (“http://www.paylasimevi.com”,”yenipencere”,
“location=1,status=1,scrollbars=1,
width=100,height=100″);
 
Bir Popup pencereyi sayfanın istediğimiz pozisyonun da nasıl gösteririz?
Popup pencereyi ekranda istediğimiz bir yere taşımak için moveTo metodunu kullanırız.
function popuac() {
    yenipencere = window.open(“http://www.paylasimevi.com”,
    “yenipencere”, “location=1,status=1,scrollbars=1, width=100,height=100”);
    yenipencere.moveTo(0, 0);
}
Yukarıdaki kod örneği sol üst köşede 100×100 boyutunda bir popup açar.
Yukarıda anlattığımız bilgileri kullanarak sayfa yüklendiğinde otomatik olarak açılan bir popup yapalım.
<html>
<head>
    <title>Popup Örnek</title>
 
    <script type=”text/javascript”>
        function poponload() {
            yenipencere = window.open(“http://www.paylasimevi.com”, “paylasimevi”,
    “location=1,status=1,scrollbars=1,width=600,height=400”);
            yenipencere.moveTo(0, 0);
        }
    </script>
 
</head>
<body onload=”javascript: poponload()”>
</body>
</html>
            Aşağıdaki kod bloğu sayfa kapandığı zaman bir popup açar ve popup içine document.write metodu ile sayfa kapanmıştır yazar.
 
<html>
<head>
    <title>Popup Örnek</title>
 
    <script type=”text/javascript”>
        function poponunload() {
            yenipencere = window.open(“”, “paylasimevi”,
    “location=1,status=1,scrollbars=1,width=400,height=300”);
            yenipencere.moveTo(0, 0);
            yenipencere.document.write(‘<H1>Sayfadan Çıktınız!</H1>’); 
        }
    </script>
 
</head>
<body onunload=”javascript: poponunload()”>
</body>
</html>
 
 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.