XtGem Forum catalog

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Share code tạo thông báo dạng Popup bootstrap 3 lưu cookie, hiển thị mỗi ngày một lần

Admin* RoSino18k *
* 14-08-2017

Thông báo từ Admin là những thông tin quan trọng ví dụ như thông báo cập nhật dữ liệu, thông báo bài viết HOT, bài viết mới. Đã qua cái thời bạn thông báo bằng văn bản HTML thông thường hay alert mỗi lần truy cập rất rắc rối thậm chí gây khó chịu cho khách truy cập. Thế nên hôm nay cudemvn đã fix lỗi và sẽ share cho các bạn một phương pháp hiển thị thông báo tới khách khá lạ và đặc biệt, đó là tạo thông báo popup ngày 1 lần sử dụng bootstrap rất mượt mà kết hợp với lưu cookie sẽ khiến bạn phải hài lòng ngay lần test đầu tiên


Nào bắt đầu nhé chúng ta hãy đến với demo: *http://hoctap321.xtgem.com

Share code tạo thông báo dạng Popup bootstrap 3 lưu cookie, hiển thị mỗi ngày một lần
[Tải ảnh]


Thực ra code này khi share vẫn còn hơi thiếu 1 số chỗ, admin đã fix lại code để share cho các thành viên của Cú Đêm Việt Nam code hoàn chỉnh rồi nhé, code được share nhất tại Cú Đêm Việt Nam, mọi sao chép vui lòng ghi rõ nguồn!! oa

Hướng dẫn cài đặt code Popup modal bootstrap 3, mỗi ngày một lần:
- Đầu tiên chúng ta sẽ import CSS, javascript bootstrap và thư viện jQuery vào dự án của mình đã nhé
<link rel="stylesheet" href="http://bootswatch.com/united/bootstrap.min.css"/>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

- Sau đó bạn hãy dán code này vào chỗ thích hợp, vì code hiển thị dạng popup nổi trên màn hình nên bạn có thể đặt nó vào đầu hay cuối trang đều được hết
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="memberModalLabel">Thông Báo Từ Admin!</h4>
</div>
<div class="modal-body">
Nội dung thông báo
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Đóng</button>
</div>
</div>
</div>
</div>


<script>

function Set_Cookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
var expires_date = new Date(today.getTime() + (expires));

document.cookie = name + "=" + escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}

function Get_Cookie(name) {

var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) &&
(name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}

function Delete_Cookie(name, path, domain) {
if (Get_Cookie(name)) document.cookie = name + "=" +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
";expires=Mon, 11-November-1989 00:00:01 GMT";
}
$(document).ready(function () {
if (Get_Cookie('sinhthanh') == null) {
Set_Cookie('sinhthanh', 'sinhthanh Popunder', '1', '/', '', '');

$('#memberModal').modal('show');
}

});
</script>

Chúng ta có thể giải thích đơn giản đó là khi truy cập vào trang lần đầu trong ngày, code sẽ xác định xem bạn đã truy cập lần nào trong ngày hay chưa, nếu chưa sẽ hiển thị popup thông báo, nếu bạn đã truy cập rồi sẽ không hiển thị gì nữa, vì thế khi test code này các bạn cũng nên lưu ý, code sẽ lưu lại cookie của khách truy cập để chỉ hiển thị mỗi ngày một lần thôi, rất hữu dụng phải không?? vui

Hy vọng với code thông báo popup bootstrap mà cudemvn share ngày hôm nay các bạn sẽ có thể nâng cao trải nghiệm người dùng và tiếp cận nội dung tới người dùng một cách tốt hơn. Chúc các bạn thành công!!

Nguồn: HuaDuyMinh - AiChat.Wap.Sh
Code được chia sẻ tại cudemvn
↑↑ Lượt xem: 3923
score
Đánh giá: 4.5/ 5, 3923 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-3923]