HTML SİTE POPUP EKLEME

Üç tane dosya oluşturun.

HTML Dosyamız
index.html

CSS Dosyamız:
pop.css

JavaScript Dosyamız :
pop.js

Resim Dosyamız
ornek.jpg

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>
pop.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();
});

});

pop.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;
}
4 cevaplar

Cevapla

Want to join the discussion?
Feel free to contribute!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir