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.

Xem demo Tải về

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://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!