📖Elementor+JS自定义年龄条件询问框
使用Elementor+JS创建一个自己喜欢的年龄询问框样式
1:先制作年龄验证的弹框
//两个弹框的简码分别是 [elementor-template id="700"] [elementor-template id="697"]满21岁的按钮的Class设置Yes_Click
未满21岁的按钮的Class设置No_Click
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);
});







🧐发表评论