首页 > WordPress
Elementor使用popups制作Cookie提示框
来源:TP课堂 时间:2024-08-27 点击:483

首先用Elementor的popups制作好提示框内容,我们只要求在首页显示该框,而不是每个页面都显示,所以设定好显示条件,除此之外,所有的显示条件都不设置,全部关闭。

1、放置两个按钮,分别是接受和拒绝,点击两个按钮都可以把提示框关掉。

2、验证cookie,如果有cookie,就不显示提示框了


代码如下:

<script src="https://www.tpketang.com/static/index/js/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<script>
    $('#my-popup').click(function(){
        $("#elementor-popup-modal-6837").css('display','none')    
    })
    
    $('#my-popup2').click(function(){
        $("#elementor-popup-modal-6837").css('display','none')    
    })
    
    document.addEventListener('DOMContentLoaded', function() {
    var isPopupShown = Cookies.get('is_popup_shown');
   alert(isPopupShown)
 
    if (isPopupShown.length==0) {
        // 弹出窗口还没有被显示过,显示它
        // 你可以在这里调用显示弹出窗口的函数或直接操作DOM
        // 例如:document.getElementById('your-popup-id').style.display = 'block';
        $("#elementor-popup-modal-6837").css('display','block')
        // 设置一个cookie,表明弹出窗口已显示
        Cookies.set('is_popup_shown', '1', { expires: 7 }); // 设置cookie过期时间为7天
    }
});
</script>