延迟后显示Cookie警报

Question

我找到了一个使用基于引导的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

Answer 1

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

CSS：

#cookie-alert{
            display:none;
        }

JS：

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


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

将时间更改为您想要的时间。 请记住，这只是一个简单的示例。

Answer 2

要延迟显示该消息，可以使用以下简单内容：

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