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 share123.vn đã giới thiệu một số kiểu popup
, các bạn có thể tham khảo:

• Tổng hợp các Code tạo quảng cáo Popup cho Blogspot
• Hướng dẫn tạo cửa sổ Popup ở góc màn hình cho blog, website
• Cách tạo popup like Facebook khi vào Blog, website
• Tạo popup cho website, Blog

Hôm nay share123.vn 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

Xem Thêm :