Web Sitenizin açılışına Popup penceresi ekleme

Önceki yazılılarımızda gerek JavaScript gerekse CSS konusunda bayağı bilgi verildiği için siteyi takip edenler buradaki kodlara hemen aşina olacaklardır.  Bu yazımızda Web Siteniz açılır açılmaz ekranda bir popup penceresi çıkmasını sağlayacağız. ornek.jpg isimli bir dosya resim dosyam var, bu resim dosyasını ilk açılışta göstereceğiz.  Resim dosyası 600x570 piksel büyüklüğünde. 

Üç tane dosya oluşturacağız, 

HTML Dosyamız
index.html

CSS Dosyamız:
popup1.css

JavaScript Dosyamız :
popup1.js

Resim Dosyamız
ornek.jpg



Aşağıdaki kodları notepad++ ya da Sublime gibi bir editöre kopyalayıp yapıştırıp 3 dosyayı oluşturunuz.

index.html içeriği

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Davet</title>
<link rel="stylesheet" href="popup1.css">
</head>
<body>
<div class="maintext">
  <h2> jQuery Popup</h2>
</div>
<div id="popup">
  <div id="dialog" class="window"> Davet
    <div id="popup_icerik">
     <img src="ornek.jpg"/>
</div>
    <div id="popupfoot"> <a href="#" class="close agree">Pencereyi Kapat</a> </div>
  </div>
  <div id="mask"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
<script src="popup1.js"></script>
 
</body>
</html>

popup1.js Dosyası İçeriği
$(document).ready(function() {
 
var id = '#dialog';
 
var maskHeight = $(document).height();
var maskWidth = $(window).width();
 
$('#maske').css({'width':maskWidth,'height':maskHeight});
 
$('#maske').fadeIn(500);
$('#maske').fadeTo("slow",0.9);
 
var winH = $(window).height();
var winW = $(window).width();
 
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
 
$(id).fadeIn(2000);
 
$('.window .close').click(function (e) {
e.preventDefault();
 
$('#maske').hide();
$('.window').hide();
});
 
$('#maske').click(function () {
$(this).hide();
$('.window').hide();
});
 
});

popup1.css Dosyası İçeriği

#maske {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#popup .window {
  position:absolute;
  left:0;
  top:0;
  width:620px;
  height:570px;
  display:none;
  z-index:9999;
  padding:0px;
  border-radius: 15px;
  text-align: center;
  background-color:#000;
}
#popup #dialog {
  width:600px; 
  height:auto;
  padding:0px;
  background-color:#ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}
 
 
#popup_icerik{
font-family: "Segoe UI", sans-serif;
font-size: 12pt;
  text-align: left;
}
#popupfoot{
font-family: "Segoe UI", sans-serif;
font-size: 16pt;
    padding: 10px 20px;
}
#popupfoot a{
text-decoration: none;
padding:5px 10px 5px 10px;
}
.agree:hover{
  background-color: #000;
  color: #FFF;
}
.popupoption:hover{
background-color:#000;
color: #FFF;
padding:5px;
}
.popupoption2:hover{
color: black;
}

 
Mutlu kodlamalar,
Oğuzhan TAŞ
Mayıs, 2017

Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale