Press "Enter" to skip to content

Ekranı Kaplayan Reklam

Samet Ocak 0

Merhaba,

Bu akşam sizlere HTML/CSS ve JS ile ekranı tam kaplayan reklam nasıl yapılır onu anlatacağım.

Öncelikle;

<div class="tam-boy-reklam" style="display:none;">
<div class="tam-boy-reklam--icerik">
<a id="re-kapat" class="popup-kapat"></a>
<a href="">
<img src="http://via.placeholder.com/800x800" alt="">
</a>
</div>
</div>

kodumuz ile html kısmımızı hazırlıyoruz, daha sonra

*{
box-sizing:border-box;
}
.tam-boy-reklam{
display: block;
position: fixed;
background-color:rgba(0, 0, 0, 0.8);
width: 100%;
height:100%;
overflow: hidden;
z-index:9999;&lt;/code&gt;

}
.tam-boy-reklam--icerik{
width: 650px;
height: 500px;
margin:0 auto;
padding:100px 70px;
text-align:center;
}
.tam-boy-reklam--icerik a{
display:block;
}
.tam-boy-reklam--icerik a img{
width:100%;
}
.popup-kapat{
width:15px;
height:15px;
background:#ddd;
float:right;
}
.popup-kapat:before{
content:'X';
padding-left:0px;
cursor:pointer;
}

CSS kodumuz la ayarımızı veriyoruz

Gelelim Js bölümüne

$(document).ready(function() {
// Aşağıdaki js olayımız komple karanlık popupımızı açar, lakin içerisindeki class ın kendisi display none olmalı
function showOverlay() {
$('.tam-boy-reklam').show();
}
setTimeout(showOverlay, 2000) // bu yukarıdaki js nın sayfa yuklendıkten ne kadar sure sonra calısacagını belırler
$("#re-kapat").click(function(){
$('.tam-boy-reklam').hide();
});
})

Dedikten sonra çoşkuyu verebiliriz.

Bir Cevap Yazın

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