延迟后显示cookie警报

时间:2018-01-17 12:46:04

标签: javascript html twitter-bootstrap cookies

我找到了一个基于bootstrap使用cookie警报的好例子。我正在尝试修改代码并将其用作表单,要求用户对页面/网站进行排名。

<div id="cookie-alert" data-expire="30" class="alert alert-primary alert-position-bottom">
    <div class="container">

        <button type="button" class="close" data-dismiss="alert">
            <span class="cookie-close-btn" aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
        </button>

        <p class="fs-13">
            <i class="fa fa-warning"></i> 

            We use cookies to provide you with a better service. 
            Carry on browsing if you're happy with this, or find out how to 
            <a href="#">manage cookies</a>.
        </p>

    </div>
</div>

有没有办法在延迟5-10分钟后或在特定页面的多次访问后显示它?

我在这里找到了代码: https://theme.stepofweb.com/Smarty/v2.1.0/HTML_BS4/page-cookie-alert.html

2 个答案:

答案 0 :(得分:3)

这只是一个简单的例子。将以下内容添加到文件中。

CSS:

#cookie-alert{
            display:none;
        }

JS:

(function(){
        setTimeout(showAlert, 2000)
    })();


    function showAlert()
    {
    document.getElementById("cookie-alert").style.display = "block";
    }

将时间更改为您想要的任何内容。请记住,这只是一个简单的例子。

答案 1 :(得分:1)

要延迟显示该消息,您可以使用以下简单的内容:

// Vanilla JS to show it after period of time
var cookieDiv = document.getElementById('cookie-alert');
cookieDiv.style.display = 'none';

setTimeout(function(){
    cookieDiv.style.display='block';
},5000) // Show it after 5000ms

此处示例: https://jsfiddle.net/cgn6qj98/2/