Hướng dẫn tạo popup quảng cáo giữa màn hình website, blog

Hình thức popup là hình thức quảng cáo banner mà khi người dùng truy cập vào một website nào đó sẽ tự động bật ra website mình muốn quảng cáo, lần trước mình đã chia sẻ một số kiểu popup



Hôm nay Quang Hệ chia sẻ một code popup nữa là popup quảng cáo giữa màn hình website, blog, một loại popup được sử dụng khá phổ biến trong các site phim, website game.
Code:

<style>
#popup{
position:absolute;
width: 100%;
}
#overlay{
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 400;
background-color: rgba(0, 0, 0, .9);
margin:0;
padding:0
}
#lightbox{
position:relative;
width:500px;
height:300px;

display:block;
text-align: center;
top:0;
margin:20px auto;
z-index: 500;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}

function setCookie(c_name, value, expires)
{
var today = new Date();
today.setTime( today.getTime() );
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = c_name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" );
}
$(document).ready(function()
{
var ever = getCookie("ever");
if(ever)
{
$("#popup").css("display", "none");
return false;
}
else
{
$("#popup").css("display", "block");
var $scrollingDiv = $("#lightbox");
$(window).scroll(function () {
setCookie("ever",1,1);
if ($(window).scrollTop() > 100)
{
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop()+20)+"px"
}, "slow");
}
else
{
$scrollingDiv.stop().animate({
"marginTop": "20px"
}, "slow");
}
});
}
});
function close()
{
setCookie("ever",1,1);
console.log('a');
$("#popup").hide();
}

</script>
<div id="popup">
<div id="overlay"></div>
<div id="lightbox">
<a href="javascript:close()">Close</a>
<a href="http://www.share123.vn" target="_blank"><img alt="chơi game onine" src="http://st.web.gate.vn/Images/Editor/TK/AS/nh_minh_ha_bai_vit/ND1_434x274.jpg" height="202" title="chơi game onine" width="300" /></a>
</div>
</div>
<div style="height:2000px;display:block">

</div>

Chúc bạn thành công

Browse More Articles

Tweet

Written by quanghe

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.