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;

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

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

<br />
*{<br />
box-sizing:border-box;<br />
}<br />
.tam-boy-reklam{<br />
display: block;<br />
position: fixed;<br />
background-color:rgba(0, 0, 0, 0.8);<br />
width: 100%;<br />
height:100%;<br />
overflow: hidden;<br />
z-index:9999;&amp;lt;/code&amp;gt;</p>
<p>}<br />
.tam-boy-reklam--icerik{<br />
width: 650px;<br />
height: 500px;<br />
margin:0 auto;<br />
padding:100px 70px;<br />
text-align:center;<br />
}<br />
.tam-boy-reklam--icerik a{<br />
display:block;<br />
}<br />
.tam-boy-reklam--icerik a img{<br />
width:100%;<br />
}<br />
.popup-kapat{<br />
width:15px;<br />
height:15px;<br />
background:#ddd;<br />
float:right;<br />
}<br />
.popup-kapat:before{<br />
content:'X';<br />
padding-left:0px;<br />
cursor:pointer;<br />
}<br />

CSS kodumuz la ayarımızı veriyoruz

Gelelim Js bölümüne

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

Dedikten sonra çoşkuyu verebiliriz.

Bir cevap yazın

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