关闭弹出窗口?

时间:2019-07-20 12:56:38

标签: javascript php html

我有这个cookie弹出窗口,当单击按钮时它不会关闭。

试图修改某些代码,但似乎不起作用

<?php if (!isset($_COOKIE['close_cookie'])) { ?>
    <section class="clearfix cookies_footer row animated slideInLeft">
        <div class="col-md-4">
            <img src="<?php echo $site_url; ?>/images/cookie.png" class="img-fluid" alt="">
        </div>

        <div class="col-md-8">
            <div class="float-right close btn btn-sm"><i class="fa fa-times"></i></div>
            <h4 class="mt-0 mt-lg-2">Our site uses cookies</h4>
            <p class="mb-1">We use cookies to ensure you get the best experience. By using our website you agree
                <br>to our <a href='<?php echo $site_url; ?>/terms_and_conditions'>Privacy Policy</a>.</p>

            <a href="#" class="btn btn-success btn-sm">Got It.</a>
        </div>
    </section>
    <?php}?>

帮助我了解单击按钮时关闭该Cookie弹出窗口需要些什么。

1 个答案:

答案 0 :(得分:0)

首先,您的按钮需要一个唯一的标识符-我们可以为其指定ID属性。

然后,您可以使用JavaScript关闭div并设置cookie。 PHP无法使用表单而不是重新加载页面,因此-在这里JavaScript是更好的选择。

PHP将在下一个请求时读取cookie,因此对if(!isset($_COOKIE['close_cookie'])的检查将返回false,并且内容不会显示。

<a href="#" id="cookie-understood-button" class="btn btn-success btn-sm">Got It.</a>

然后,我们引入JavaScript隐藏该块并设置Cookie

function close_cookie_overlay() {
    // Set the cookie
    var date = new Date();
    var duration_days = 60; 
    date.setTime(date.getTime() + (duration_days *24*60*60*1000));
    document.cookie = "close_cookie=checked; expires"+date.toUTCString()+"; path=/";

    // Close the overlay
    document.getElementsByClassName("cookies_footer")[0].style.display = 'none';
}

// Add a listener to the button
document.getElementById("cookie-understood-button").addEventListener("click", close_cookie_overlay);