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ữ
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
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!!
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">×</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??
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
Code được chia sẻ tại cudemvn
Đánh giá: 4.5/ 5, 3998 bình chọn
Còn “nhiều” Lắm!