1

你好这是我第一次在这里问问题，希望我不要要求太多，我为我的网站创建了一个 20 秒后开始的灯箱类型弹出窗口，但如果我继续浏览，我不希望弹出窗口继续出现（会话 cookie），我尝试过创建 cookie，但似乎我没有正确执行。如果您能提供帮助，我将不胜感激，谢谢。 

window.setTimeout(function () {

    $('.popupbox').ready(function () {
        $('.backdrop, .box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('.box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });

    $('.close').click(function () {
        close_pop();
    });

    $('.backdrop').click(function () {
        close_pop();
    });
}, 20000);


if (!readCookie('hide')) {
    $('.popupbox').show();
}

function close_pop() {
    $('.backdrop, .box').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, .box').css('display', 'none');
    });

    $.cookie('hide', true, 1, {
        path: '/'
    });
    return false;
}
4

1 回答 1

2

div如果用户在 div 内单击或关闭 div ，则以下代码将在 20 秒后hide显示，除非他们丢失cookies，否则即使重新加载，也不会再次显示。

特别注意：不幸的是jquery.cookie.js插件没有 CDN，所以我将它内联包含在下面...请不要在生产中使用普通脚本包含它。

演示：jQuery jsFiddle

HTML

<div class="popupbox" style="display: none;">
    <div class="backdrop box"> 
        <span>Hello World I am a popup.</span>
        <input type="button" class="close" value="Close" />
    </div>
</div>

JS

$(function () {
    if (!$.cookie('hide')) {
        window.setTimeout(function () {
            $('.popupbox').show();
            $('.popupbox').ready(function () {
                $('.backdrop, .box').animate({
                    'opacity': '.50'
                }, 300, 'linear');
                $('.box').animate({
                    'opacity': '1.00'
                }, 300, 'linear');
                $('.backdrop, .box').css('display', 'block');
            });

            $('.close').click(function () {
                close_pop();
            });

            $('.backdrop').click(function () {
                close_pop();
            });
        }, 20000);
    }
});


function close_pop() {
    $('.backdrop, .box').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, .box').css('display', 'none');
    });

    $.cookie('hide', true);
    return false;
}

/*!
 * jQuery Cookie Plugin v1.3.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals.
        factory(jQuery);
    }
}(function ($) {

    var pluses = /\+/g;

    function raw(s) {
        return s;
    }

    function decoded(s) {
        return decodeURIComponent(s.replace(pluses, ' '));
    }

    function converted(s) {
        if (s.indexOf('"') === 0) {
            // This is a quoted cookie as according to RFC2068, unescape
            s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }
        try {
            return config.json ? JSON.parse(s) : s;
        } catch (er) {}
    }

    var config = $.cookie = function (key, value, options) {

        // write
        if (value !== undefined) {
            options = $.extend({}, config.defaults, options);

            if (typeof options.expires === 'number') {
                var days = options.expires,
                    t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = config.json ? JSON.stringify(value) : String(value);

            return (document.cookie = [
            config.raw ? key : encodeURIComponent(key),
                '=',
            config.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''].join(''));
        }

        // read
        var decode = config.raw ? raw : decoded;
        var cookies = document.cookie.split('; ');
        var result = key ? undefined : {};
        for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decode(parts.shift());
            var cookie = decode(parts.join('='));

            if (key && key === name) {
                result = converted(cookie);
                break;
            }

            if (!key) {
                result[name] = converted(cookie);
            }
        }

        return result;
    };

    config.defaults = {};

    $.removeCookie = function (key, options) {
        if ($.cookie(key) !== undefined) {
            // Must not alter options, thus extending a fresh object...
            $.cookie(key, '', $.extend({}, options, {
                expires: -1
            }));
            return true;
        }
        return false;
    };

}));

演示：JavaScript jsFiddle

HTML

<div class="popupbox" style="display: none;">
    <div class="backdrop box"> 
        <span>Hello World I am a popup.</span>
        <input type="button" class="close" value="Close" onclick="close_pop()" />
    </div>
</div>

JS

function close_pop() {
    $('.backdrop, .box').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, .box').css('display', 'none');
    });

    setCookie('hide', true, 365);
    return false;
}

function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

window.onload=function () {
    if (!getCookie('hide')) {
        window.setTimeout(function () {
            $('.popupbox').show();
            $('.popupbox').ready(function () {
                $('.backdrop, .box').animate({
                    'opacity': '.50'
                }, 300, 'linear');
                $('.box').animate({
                    'opacity': '1.00'
                }, 300, 'linear');
                $('.backdrop, .box').css('display', 'block');
            });

            $('.close').click(function () {
                close_pop();
            });

            $('.backdrop').click(function () {
                close_pop();
            });
            //change 1000 to 20000 for 20 seconds
        }, 1000);
    }
}
于 2013-08-10T03:50:23.270 回答