📖Elementor+JS自定义年龄条件询问框

Elementor+JS自定义年龄条件询问框插图

使用Elementor+JS创建一个自己喜欢的年龄询问框样式

1:先制作年龄验证的弹框

Elementor+JS自定义年龄条件询问框插图1

//两个弹框的简码分别是
[elementor-template id="700"]
[elementor-template id="697"]

满21岁的按钮的Class设置Yes_Click
未满21岁的按钮的Class设置No_Click

Elementor+JS自定义年龄条件询问框插图2
Elementor+JS自定义年龄条件询问框插图3

2:在wpcode中复制代码

//JS
document.addEventListener('DOMContentLoaded', function () {
    function setCookie(name, value, days) {
        let cookieStr = name + "=" + encodeURIComponent(value) + "; path=/";
        if (days) {
            const expires = new Date(Date.now() + days * 864e5).toUTCString();
            cookieStr += "; expires=" + expires;
        }
        document.cookie = cookieStr;
    }
    function getCookie(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }
    function setupPopupHandlers() {
        document.querySelectorAll('.Yes_Click').forEach(function (btn) {
            btn.addEventListener('click', function () {
                setCookie('Age48', 'true'); // 不设置days → 设置为会话Cookie
            });
        });

        document.querySelectorAll('.No_Click').forEach(function (btn) {
            btn.addEventListener('click', function () {
                elementorProFrontend.modules.popup.showPopup({ id: 697 });//对应的弹框ID
            });
        });
    }
    // 等待 elementorProFrontend.modules.popup 可用
        const waitForPopupModule = setInterval(() => {
        if (typeof elementorProFrontend !== 'undefined' &&
            elementorProFrontend.modules &&
            elementorProFrontend.modules.popup &&
            typeof elementorProFrontend.modules.popup.showPopup === 'function') {
            clearInterval(waitForPopupModule);
            if (!getCookie('Age48')) {
                elementorProFrontend.modules.popup.showPopup({ id: 700 });//对应的弹框ID
                const waitForButtons = setInterval(() => {
                    if (document.querySelector('.Yes_Click') || document.querySelector('.No_Click')) {
                        setupPopupHandlers();
                        clearInterval(waitForButtons);
                    }
                }, 300);
            }
        }
    }, 300);
});

标签

🧐发表评论

您必须启用javascript才能在此处查看验证码