Popup pencereleri bir sayfa içinde ek bir pencere açma islemidir. Popup pencereler JavaScript kullanarak açilirlar.
Popup pencereler yaygin olarak reklam göstermek amaciyla kullanilir. Diger bir kullanim amaci ise yardim sayfalari tasarlamak içindir. Ihtiyaciniz dogrultusunda farkli amaçlar için kullanilabilirler.
Popup pencereler; Sayfa yüklenmesinde,Sayfadan çikildiginda,Kullanici bir linki tikladiginda açilabilir.
Sayfa yüklenirken veya kapatilirken bir popup açmak için body etiketi içine asagidaki kodu yazmaniz yeterlidir.
Sayfa yüklenirken
1
| <body onload="javascript: alert(Load islemi!')"> |
Sayfa Kapatilirken
1
| <body onunload="javascript: alert('UnLoad islemi!')" |
Link tiklandiginda
1
| <a href="javascript: alert('link Tiklandi!')">Popup Aç!</a> |
Popup olarak yeni bir pencere açmak istiyorsak window.open() metodunu kullaniriz. Window.open metodunu URL parametresine bir sayfanin adresini yazdigimizda bu sayfa popup içerisinde açilir, URL nesnesini bos biraktigimizda ise bos bir popup pencere açilir.
window.open Metodunun Kullanimi
1
| window.open(URL,Pencere_Adi [, Pencere_Özellikleri]) |
- URL : Yeni pencerede açilacak olan sayfanin URL bilgisi. Bu parametre bos olabilir.
- Pencere_Adi : Açilacak olan pencereye verilecek olan isim, bu isim açilan pencereye referans olarak kullanilabilir.
- Pencere_Özellikleri : Açilacak olan pencerenin özelliklerini belirleyecegimiz string ifade. Bu parametre ile açilacak olan pencerenin durum çubugu,adres çubugu gibi özelliklerini ayarlayabiliriz.
Asagidaki kod standart özelliklere sahip bir popup penceresi açar
1
|
window.open() kullanarak açacagimiz bir pencere popup engelleyicilere takilabilir.Popup Pencerenin Özelliklerini Degistirmek:
Window.open() metodunun son parametresini kullanarak açmak istediginiz popup’in özelliklerini degistirebilirsiniz. Asagidaki kod durum çubugu olan ve diger özellikleri tasimayan bir popup açar.
1
2
|
Popup pencerenin özelliklerini asagidaki listede bulunan parametreleri kullanarak degistirebilirsiniz.
Parametre
|
Açiklama
|
|---|---|
status
|
Pencerenin altinda bulunan durum çubugu
|
toolbar
|
Browserin standart araç çubugu. Örnegin ileri geri butonu.
|
location
|
Adres Çubugu.
|
menubar
|
Pencerenin Menüsü
|
directories
|
Browserin standart klasör butonlari.
|
resizable
|
Kullanici açilan popup boyutunu degistirebilirmi.
|
scrollbars
|
Eger açilan sayfa popup içine sigmazsa scroll bar çikacakmi?
|
height
|
Pencerenin pixel cinsinden yüksekligi (Örnegin:height='350')
|
| width | Pencerenin pixel cinsinden genisligi (Örnegin:width='350') |
Örnekler:
1 - Asagidaki kod menü bari olan bir pencere açar. Açilan pencere boyutu degistirilebilir ve 350 pixel genisliginde, 250 pixel yüksekligindedir.
1
2
| "yenipencere","menubar=1,resizable=1,width=350,height=250"); |
2- Adres Çubugu, durum çubugu ve scroll bari olan 100x100 boyutunda bir popup açar.
1
2
3
| "location=1,status=1,scrollbars=1, width=100,height=100"); |
Bir Popup pencereyi sayfanin istedigimiz pozisyonun da nasil gösteririz?
Popup pencereyi ekranda istedigimiz bir yere tasimak için moveTo metodunu kullaniriz.
1
2
3
4
5
| function popuac() { "yenipencere","location=1,status=1,scrollbars=1, width=100,height=100"); yenipencere.moveTo(0,0); } |
Yukaridaki kod örnegi sol üst kösede 100x100 boyutunda bir popup açar.
Yukarida anlattigimiz bilgileri kullanarak sayfa yüklendiginde otomatik olarak açilan bir popup yapalim.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html> <head> <title>Popup Örnek</title> <script type="text/javascript"> function poponload() { "yazilimmutfagi", "location=1,status=1,scrollbars=1,width=600,height=400"); yenipencere.moveTo(0, 0); } </script> </head> <body onload="javascript: poponload()"> </body></html> |
Asagidaki kod blogu sayfa kapandigi zaman bir popup açar ve popup içine document.write metodu ile sayfa kapanmistir yazar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <html> <head> <title>Popup Örnek</title> <script type="text/javascript"> function poponunload() { yenipencere = window.open("", "yazilimmutfagi", "location=1,status=1,scrollbars=1,width=400,height=300"); yenipencere.moveTo(0, 0); yenipencere.document.write('<H1>Sayfadan Çiktiniz!</H1>'); } </script> </head> <body onunload="javascript: poponunload()"> </body></html> |
Yorumlar
Yorum Gönder