Tạo hộp thoại thông báo sử dụng cookie cho Blog
vào
10 thg 9, 2018
Bài này mình trình bày các bước tạo hộp thoại thông báo sử dụng cookie cho Blog bằng script và css. Phương pháp thực hiện cũng khá đơn giản nhưng đem lại cho Blog có phong cách chuyên nghiệp hơn.
Hộp thoại xuất hiện khi khách truy cập Blog lần đầu tiên sẽ thấy hộp thoại đọc và click vào nút tắt và khi truy cập trang khác hoặc tải lại trang hộp thoại sẽ không xuất hiện lại. Nếu khách không tắt hộp thoại bằng nút tắt thì khi khách truy cập trang khác hoặc tải lại trang hộp thoại vẫn sẽ xuất hiện cho đến khi khách tắt bằng nút tắt hộp thoại.
Hộp thoại sử dụng cookie là chúng ta sẽ thiết lập hộp thoại sẽ xuất hiện lại sau khoảng thời gian mà chúng ta đã thiết lập. Nếu chưa hết hạn mà khách xóa lịch sử trình duyệt bao gồm cookie thì khi khách truy cập lại hộp thoại sẽ xuất hiện trở lại được tính bằng thời gian khi khách tắt hộp thoại.
Trên trang w3scool đã có đoạn javscript về cookie chúng ta chỉ cần lấy nguyên về chỉnh sửa lại một chút như sau:
Bạn có thể thay thế thẻ data mặc định <data:messages.euCookieNotice/> mình đánh dấu màu xanh thành đoạn văn bản khác. Ngoài ra nếu bạn muốn hộp thoại xuất hiện ngay chính giữa màn hình như hình ví dụ sau thì sử dụng style
Chèn style trước </head>
Chấm hết bài!!!
 |
| Hình minh họa |
Hộp thoại xuất hiện khi khách truy cập Blog lần đầu tiên sẽ thấy hộp thoại đọc và click vào nút tắt và khi truy cập trang khác hoặc tải lại trang hộp thoại sẽ không xuất hiện lại. Nếu khách không tắt hộp thoại bằng nút tắt thì khi khách truy cập trang khác hoặc tải lại trang hộp thoại vẫn sẽ xuất hiện cho đến khi khách tắt bằng nút tắt hộp thoại.
Hộp thoại sử dụng cookie là chúng ta sẽ thiết lập hộp thoại sẽ xuất hiện lại sau khoảng thời gian mà chúng ta đã thiết lập. Nếu chưa hết hạn mà khách xóa lịch sử trình duyệt bao gồm cookie thì khi khách truy cập lại hộp thoại sẽ xuất hiện trở lại được tính bằng thời gian khi khách tắt hộp thoại.
Trên trang w3scool đã có đoạn javscript về cookie chúng ta chỉ cần lấy nguyên về chỉnh sửa lại một chút như sau:
Copy
<head>
<style type='text/css'>
.dialog-cookie {
background: rgba(0,0,0,.85);
padding: 15px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-width: 1600px;
width: 100%;
z-index: 101;
}
.dialog-cookie-content {
text-align: left;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
color: #ffffff;
}
.dialog-cookie-close {
fill: #ffffff;
width: 21px;
height: 21px;
vertical-align: middle;
cursor: pointer;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</head>
<body>
<script>
var cookie = "<data:messages.euCookieNotice/>";
//<![CDATA[
function setCookie(cookie_name, value) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + (365 * 25))
document.cookie = cookie_name + "=" + escape(value) + "; expires=" + exdate.toGMTString() + "; path=/"
}
function getCookie(cookie_name) {
if (document.cookie.length > 0) {
cookie_start = document.cookie.indexOf(cookie_name + "=")
if (cookie_start != -1) {
cookie_start = cookie_start + cookie_name.length + 1;
cookie_end = document.cookie.indexOf(";", cookie_start)
if (cookie_end == -1) {
cookie_end = document.cookie.length
}
return unescape(document.cookie.substring(cookie_start, cookie_end))
}
}
return ""
}
$(function() {
if (getCookie('cookie_message') != 'no') {
$('body').append('<div class="dialog-cookie"><div class="dialog-cookie-content">' + cookie + '<svg class="dialog-cookie-close"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></div></div>')
}
$('.dialog-cookie-close').click(function() {
$('.dialog-cookie').hide()
setCookie('cookie_message', 'no')
return false
})
})
//]]></script>
</body>
Bạn có thể thay thế thẻ data mặc định <data:messages.euCookieNotice/> mình đánh dấu màu xanh thành đoạn văn bản khác. Ngoài ra nếu bạn muốn hộp thoại xuất hiện ngay chính giữa màn hình như hình ví dụ sau thì sử dụng style
Chèn style trước </head>
Copy
<style type='text/css'>
.dialog-cookie {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
background: rgba(0,0,0,.85);
box-sizing: border-box;
padding: 15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 520px;
width: 100%;
z-index: 101;
}
</style>
Chấm hết bài!!!
Nội dung chính
