Home »

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

28 tháng 12, 2013
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 Thế Giới Blog đã giới thiệu một số kiểu popup
, các bạn có thể tham khảo:

 Hôm nay Thế Giới Blog 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
Tags: , ,

Comments[ 0 ]


Đăng nhận xét