Preload là banner có kích thước lớn hiển thị ở giữa màn hình khi người dùng truy cập vào website, có thời hạn xuất hiện tùy theo nhu cầu của nhà quảng cáo hoặc chủ sở hữu website.
CSS
body { margin: 0; } img { max-width: 100%; height: auto; } .preload-open { overflow: hidden; } .preload-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: .9; } .preload-banner { position: fixed; top: 10%; text-align: center; padding: 15px; z-index: 9999; width: 100% } .preload-banner img { display: block; width: 768px; margin: 0 auto } .preload-banner .preload-x-btn { font-size: 28px; position: fixed; top: 15px; right: 15px; cursor: pointer; color: #fff; transition:all .2s ease } .preload-banner .preload-x-btn:hover { color: #000 }
Xử lí Cookies
Đầu tiên, các bạn thêm các hàm sau.
function deleteCookie(name) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } function getCookie(cname) { var name = cname + '='; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) == 0) return c.substring(name.length, c.length); } return ''; } function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 60 * 60 * 1000)); var expires = 'expires=' + d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/"; }
Preload
Ví dụ này hiển thị quảng cáo 12 tiếng một lần.
if (getCookie('preload') == '') { $('body').append('<div class="preload-banner"><a href="https://www.inithtml.com/"><img src="preload-banner.png" width="768" height="768" loading="lazy"></a><span class="preload-x-btn">X</span></div><div class="preload-backdrop preload-smoke"></div>').addClass('preload-open'); setCookie('preload', '1', 12); } $('.preload-x-btn').click(function() { $('.preload-banner, .preload-smoke').remove(); $('body').removeClass('preload-open'); });
Chúc các bạn thành công!