JavaScript ile Popup Pencereleri
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
<body onload="javascript: alert(Load islemi!')">
Sayfa Kapatilirken
<body onunload="javascript: alert('UnLoad islemi!')"
Link tiklandiginda
<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
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
window.open("http://www.yazilimmutfagi.com", "yenipencere");
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.
window.open("http://www.yazilimmutfagi.com", "yenipencere", "status=1");
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.
.window.open("http://www.yazilimmutfagi.com", "yenipencere","menubar=1,resizable=1,width=350,height=250");
2- Adres Çubugu, durum çubugu ve scroll bari olan 100×100 boyutunda bir popup açar.
window.open ("http://www.yazilimmutfagi.com","yenipencere", "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.
function popuac() { yenipencere = window.open("http://www.yazilimmutfagi.com", "yenipencere","location=1,status=1,scrollbars=1, width=100,height=100"); yenipencere.moveTo(0,0); }
Yukaridaki kod örnegi sol üst kösede 100×100 boyutunda bir popup açar.
Yukarida anlattigimiz bilgileri kullanarak sayfa yüklendiginde otomatik olarak açilan bir popup yapalim.
<html> <head> <title>Popup Örnek</title> <script type="text/javascript"> function poponload() { yenipencere = window.open("http://www.yazilimmutfagi.com", "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.
.<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>
Açty?ymyz asyfaya bir javascript fonksiyonu eklemek için ne yapmak gerekir?
tabiki yapabilrisiniz. js ile cozunurlulugu alyr, buna gorede dynamyk bir yer belirlersiniz. Zaman olursa yapar eklerim buraya. Yada yapan varsa ve paylasyrsa sevynyryz.
Selam popup pencerenin nerede açylaca?yny açyklamy?synyz ama her kullanycyya uymasy için çözünürlük olarak de?ilde center koduyla yapabilir miyiz ? Te?ekkürler
Selam. Ben siteme soundcloud (iframe) icerikli bir popup penceresi eklemek istiyorum. yardim ederseniz sevinirim. tesekkurler.
mskunt 2013-01-06 03:37:25
Mesela sitenizin yorum preview’u gibi.
ya benim bir radyo sitem var http://www.radyogumbur.blogspot.com ben buna radyo fenomen deki gibi Bir resim olsun istiyorum o resime tiklayinca radyom ayri bir pencerede açilsin ( birkaç sey denedim ama onlar yeni sekmede açiyordu ) istiyorum lütfen yardim eder misiniz?…
linki koydugun sayfada kod eklemeden popup açamazsin, seninki siradan bir link olur. kod koymak istememenin sebebi nedir ? linki koydugun sayfanin kod kismina erisemiyormusun ?
s.a arkaslar yeni acilacak olan sayfanin linkini anasayfaya koydum ve o acilacak sayfayi kücük boyutta acmak istiyorum ama yanliz linki koydugum sayfaya kod koymadan bunu baska türlü nasil hallederim yeni acilacak sayfaya kod koya bilirim vede css den de bu islemi yapa biliyormuyuz yardimci olursaniz sevinirim iki gündür ugrasiyorum takildim kaldim
popup acilmasini istedigin sayfada. pageload içinde if(!ispostback) içine dinamik olarak sayfaya popup acilma kodunu eklek. boylece sadece bu sayfada bir kez popu acilmis olur.
Bende her seferinde popup açilmasini istemiyorum sadece bir kere sayfa açildiginda açilsin ama baska sayfalarda dolasirken tekrar tekrar açilmasin umarim yardimci olabilirsiniz tesekkürler..
mrb ben biraz acemiyim , çözüm önerinizi bir türlü yapamadim yardimci olursaniz http://www.ihaleci.org bir sitem var ve bu siteyi blogger üzerinden yaptim benim sikintim su live msn nin sayfa açildiginda bagimsiz açilmasini istiyorum veya sayfada sabit kalmasini çünki sayfa degisimlerinde baglanti kopuyor ve sürekli kullaniciya uyarida bulunuyor yardimci olursaniz saygilar.
bende bi butona basilinca 15 tane benim belirledigim sitelerin tek seferde acilmasini istiyorum
Valla sakama maka bircok yerde popup buldum ise yaramadi ama sagol sizinkisi yaradi tesekkür ederiz
🙂