带有 Cookie 的警报引导程序

Question

我尝试使用引导程序中的警报来获取 cookie 通知。 我使用了以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" </script>

<script src="src/jquery.cookie.js"></script>

<script type="text/javascript">
jQuery(function( $ ){

// Check if alert has been closed
if( $.cookie('alert-box') === 'closed' ){

    $('.alert').hide();

}

 // Grab your button (based on your posted html)
$('.close').click(function( e ){

    // Do not perform default action when button is clicked
    e.preventDefault();

    /* If you just want the cookie for a session don't provide an expires
     Set the path as root, so the cookie will be valid across the whole site     */
    $.cookie('alert-box', 'closed', { expire 7, path: '/' });

});

});
</script>

<!-- Body Markup -->
<div class="alert alert-info fade in">            
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong> ALERT BODY</strong>
</div>

小提琴链接是： http://jsfiddle.net/Nighteyes/fy0w1vLc/

现在我希望在按下关闭按钮后设置一个 cookie。 cookie 将在 7 天后过期。

谁能帮帮我？

夜视

Answer 1

function ExpireCookie(minutes) {
  var date = new Date();
  var m = minutes;
  date.setTime(date.getTime() + (m * 60 * 1000));
  $.cookie("cookie", "value", { expires: date });
}

在您的 onClick 事件中调用此函数。将总分钟数放入构造函数 ( ) 中。

ExpireCookie(**ADD MINUTES THAT TOTAL WEEK HERE**); 

Answer 2

对于使用 Bootstrap 4 的未来读者，Toast 组件现在可用于创建 cookie 同意横幅。这是一个工作示例：

https://codeply.com/p/azCmarhM9X

HTML：

<div class="fixed-bottom p-4">
    <div class="toast bg-dark text-white w-100 mw-100" role="alert" data-autohide="false">
        <div class="toast-body p-4 d-flex flex-column">
            <h4>Cookie Warning</h4>
            <p>
            This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies. 
            </p>
            <div class="ml-auto">
                <button type="button" class="btn btn-outline-light mr-3" id="btnDeny">
                    Deny
                </button>
                <button type="button" class="btn btn-light" id="btnAccept">
                    Accept
                </button>
            </div>
        </div>
    </div>
</div>

JavaScript：

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {   
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

function cookieConsent() {
    if (!getCookie('allowCookies')) {
        $('.toast').toast('show')
    }
}

$('#btnDeny').click(()=>{
    eraseCookie('allowCookies')
    $('.toast').toast('hide')
})

$('#btnAccept').click(()=>{
    setCookie('allowCookies','1',7)
    $('.toast').toast('hide')
})

// load
cookieConsent()

Bootstrap cookie consent demo

Answer 3

Bootstrap 5 中的 Cookie 通知弹出窗口：

Cookies 通知是网站或网页中第一次访问网站时出现的一种弹出窗口。因此，我们在 Bootstrap 5 中使用 CSS3 制作了一个很棒的 Cookies Notification Popup 用户界面。

demo