Tạo Popup Thông Báo Chạy Bằng Cookie Cực Chất

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Ba, 25 tháng 12, 2018 -

Popup là một cửa sổ nhỏ xuất hiện ngay trên website, giúp cho chúng ta có thể đưa thông tin đến người dùng 1 cách nhanh chống. Nhằm muốn thông báo hay quảng bá một sản phẩm hay thông tin cần thiết đối với người dùng.
Để tạo ra một Popup hiện thị theo một chu kì thời gian nhất định, thì chúng ta hãy đọc hết bài viết này nhé.

Tạo Popup Thông Báo, Tạo Popup Chạy Bằng Cookie, Tạo Popup Chạy Bằng Js, Javascript, Jquery, Tạo Popup Thông Báo Chạy Bằng Cookie Cực Chất, Popup là một cửa sổ nhỏ xuất hiện ngay trên website, giúp cho chúng ta có thể đưa thông tin đến người dùng 1 cách nhanh chống. Nhằm muốn thông báo hay quảng bá một sản phẩm hay thông tin cần thiết đối với người dùng.

Bây giờ thì bắt đầu thui. Đọc cho kỹ rồi làm theo nha, lỡ một bước thì chẳng hiện Popup đâu.

Các bước thực hiện


Trước tiên hãy truy cập vào Template Blog của bạn, rồi thêm đoạn code dưới đây lên trên thẻ đóng </body> nha.

<!-- Code By Sĩ Ben IT -->
<style>
#tnbdxviii {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    transform: scale(1.015);
    z-index: 999999999999!important;
}
.tnbdxviii {
    transform: scale(1)!important;
    background: rgba(0,0,0,.2)!important;
    opacity: 1!important;
    visibility: visible!important;
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    margin: 0!important;
    transition: .5s!important;
}
.tnbdxviii_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.2)}
.tnbdxviii_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.tnbdxviii_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.tnbdxviii_ p{margin:0;padding:0;font:400 16px Roboto,sans-serif;color:#222;line-height:1.5}
.tnbdxviii_ p a{font-weight:700;color:#222}
.tnbdxviii_ p a:hover{text-decoration:underline}
.tnbdxviii_ a.close {
 padding: 10px 30px;
    display: inline-block;
    margin:0;
    float: right;
    font-size: 12px;
    font-weight: 700;
 text-transform:uppercase;
    color: #888!important;
  }
.tnbdxviii_ a.close:hover {
background-color:#f2f3f5
  }
</style>
<div id='tnbdxviii'>
<div class='tnbdxviii_'>
<h2>THÔNG BÁO</h2>
<p>Mọi người hãy ủng hộ Blog thường xuyên để Ad có động lực đăng bài nhiều bài hay nhé. Mặc dù Ad không có nhiều thể gian để đăng bài, nhưng sẽ cố gắng để không phụ lòng mọi người !</p>
<a class='close ripple' href='javascript:void(0);' id='closes'>Đóng</a>
<a class='close ripple' href='https://fb.com/dangtiensi.it' target='blank'>Liên hệ</a>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#thongbao').click(function() {
$('#tnbdxviii').toggleClass('tnbdxviii');
})
$('#closes').click(function() {
$('#tnbdxviii').removeClass('tnbdxviii');
})
//]]></script>
<script type='text/javascript'>
//<![CDATA[
// Set cookie
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
// Read cookie
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var luuCookie = getCookie("cookiename");
if(luuCookie != 'hello'){
var expiration = new Date();
expiration.setTime(expiration.getTime() + 5*60000);
setCookie("cookiename","hello",expiration);
var thogbao = document.getElementById("tnbdxviii");
thogbao.classList.add("tnbdxviii");
}
});
//]]>
</script>

Cách sử dụng


Trong đoạn code trên có dòng:
expiration.setTime(expiration.getTime() + 5*60000);

Số 5*6000 có nghĩa là 5 phút sẽ xuất hiện một lần. Có thể chỉnh thành 15*6000 thì 15 phút sẽ hiện một lần nhé.
Nếu sử dụng thẻ <button/> hay <a/> thì thêm vào như sau:
<button id='thongbao'>Click Here</button>
<!-- Hoặc -->
<a href='javascript:void(0);' id='thongbao'>Click Here</a>

Lời kết


Chúc các bạn thành công nhé. Style của Popup có thể tuỳ chỉnh thoải mái nhá :P

Tag:
0 Like
12 Comment More Emoticon

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin