KATEGORİLER

Sayfa Açılışında Otomatik Popup Oluşturma

Sayfa Açılışında Otomatik Popup Oluşturma

1. Yöntem :

Bir HTML Editörü ile index.html sayfasını oluşturun veya var olan ana sayfanıza <head> ile </head> aşağıdaki kodları yerleştirin.

<head>

<script language=”javascript”>
function pop(){
window.open(“popup.html”,”acılacaksayfa”,”width=40 0,height=400,menubar=0,toolbar=0,resizable=0″);
}
</script>

</head>

Sonra yine index.html dosyasındaki <body> etiketinin içine onload=”pop()” eklemelisiniz kısacası şöyle olacak:

<body onload=”pop()”>

Yukarıdaki kodda gördüğünüz gibi popup.html sayfası oluşturmanız gerekiyor. popup.html sayfasının içine de istediğinizi isterseniz yazı isterseniz resim ekleyebilirsiniz . Popup penceresinin boyutlarını yukarıdan istediğiniz gibi değiştirebilirsiniz.

2. Yöntem :

Yukarıdaki uygulamayı kullanırsanız her defasında sayfanıza giren kişi popup sayfasıyla karşılaşacaktır. 2.uygulamayı kullanırsanız sayfanıza giren kişi 1 kere popup sayfanızı görür bir daha girdiğinde ise popup sayfanızı göremez. Browser’ın çerezlerini silen kullanıcılar tekrar sayfanıza girerse popup sayfanız tekrar göreceklerdir.

index.html sayfanızın yada popup görünmesini istediğiniz sayfanın içindeki<head> ile </head> arasına aşağıdaki kodları yapıştırın.

<script type=”text/javascript” src=”js/jquery-1.5.1.min.js”></script>
<link type=”text/css” href=”js/basic.css” rel=”stylesheet” media=”screen” />
<!–[if lt IE 7]>
<link type=”text/css” href=”js/basic_ie.css” rel=”stylesheet” media=”screen” />
<![endif]–>
<link type=”text/css” href=”js/gg_fb.css” rel=”stylesheet” media=”screen” />
<script type=”text/javascript” src=”js/jquery.simplemodal.1.4.1.min.js”></script>

Sonra <body> ile </body> arasına aşağıdaki kodları yerleştiriyorsunuz.

<script type=”text/javascript”>

var sure = 10 ; // Geri sayım sayacının başlayacağı rakam
function Kontrol() {
sure = sure-1;
$(“span#1″).text(sure); // <span id=”1″> </span> olan yerde geri sayım yapacaktır
if( sure > 0 ) setTimeout(“Kontrol()”, 1000);
}
if(GetCookie(‘cerez’) !== ‘omerbozalan’ )
{
jQuery(document).ready( function()
{
kapat = (sure-1)*1000 ;
jQuery(‘.gg-fb’).modal({minWidth:”600″}); // Popup burda açılıyor
Kontrol();
setTimeout(function(){ $.modal.close(‘.gg-fb’); }, kapat ); // Popup burda kapanıyor
SetCookie(‘cerez’,’omerbozalan’,1); // cerez olusturduk her ziyaretçiye bir kere açılması için

});
}
</script>

<div style=”display:none;”><div class=”gg-fb”>Web sitemize hoşgeldiniz<img src=”js/123.png” width=”533″ height=”80″ />
<div class=”fb-div”><strong> <span id=”1″ style=”color: #ff0000;”> </span> Saniye sonra Kapanacaktır</strong></div></div></div>

Kırmızıyla belirtilen alan popup penceresinde görüntülenecek olan içeriktir. Hem resim koyabilirsiniz hemde yazı yazabilirsiniz. Ben iki şekli yukarıda gösterdim, hangisini beğenirseniz onu yaparsınız.

NOT: Değişiklik yapıp kaydettiğinizde browserda görebilirsiniz fakat tekrar sayfanızda değişiklik yapıp görüntülemek istediğinizde çalışmaz bu yüzden browser ın çerezlerini silin sonra tekrar çalıştırın.

Diğer css ve js. dosyalarının içeriğini yazmıyorum çünkü sizlere örneğini aşağıdaki linkte vereceğim . Css ve js dosyalarını aşağıda bulabilirsiniz ve sayfanıza ekleyebilirsiniz. Kolay gelsin.

ÇALIŞMA DOSYASINI İNDİRMEK İÇİN TIKLAYIN

Ders Sahibi;

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

sayfa açılışında otomatik popup oluşturma