Touch DesingHTML 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;
}
Touch Desing
Stajer alımı var mı acaba
Çalıştı teşekkürler
Allah razı olsun hocam bunu arıyorum kaç zamandır
Kaç gündür bunu arıyorum sağolun hocam