Tạo popup chỉ hiện 1 lần cho blogspot

reset and begin

8/24/2013

tương tự chức năng của javascript popup quảng cáo khuyến mãi - tuy nhiên lần này dùng jquery nên có vẻ mượt mà và load nhẹ hơn - demo mượn tạm trang chính chủ
đặc điểm
popup chỉ hiện 1 lần duy nhất

nhược điểm chỉ tương thích thư viện jquery 1.8 trở về quá khứ - 1.9 thì kiếm cái khác dùng thôi
cách nhúng .

B1 : thư viện jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>

B2 style css

<style>
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{}


#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;}


#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif) no-repeat center center;}
           #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
           #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
           #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px;

background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
           #cboxPrevious{left:0px; background-position: -51px -25px;}
           #cboxPrevious.hover{background-position:-51px 0px;}
           #cboxNext{left:27px; background-position:-75px -25px;}
           #cboxNext.hover{background-position:-75px 0px;}
           #cboxClose{right:0; background-position:-100px -25px;}
           #cboxClose.hover{background-position:-100px 0px;}
           .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
           .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
           .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
           .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
    #mdfb {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #mdfb a,
    #mdfb a:hover,
    #mdfb a:visited {
        text-decoration:none;
    }
    .mdbox-title {
background:#000;
       color: #fff;

       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:20px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .mdbox-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #mdsubs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }</style>

B3 script

<script type="text/javascript">
$(function() {

if (document.cookie.indexOf('visited=flase') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#mdfb"});
}

});
</script>

B4 nội dung

<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
helo nhúng gì đó vào đây
</center>
</div></div>
<style>#cboxClose{display:none;}</style>

B5 lưu các file javascript về host để dùng vì các host javascript có thể die bất ngờ
nguồn http://www.techirsh.com/