About
Designed to allow visitor to navigate between popups (originally triggered by a button in a Unlimited Elements timeline widget).
How to Setup Snippet
In the button, we have to pass a function to get the ID of the button. And then, we can use that ID to navigate to other popups and add a click method through Javascript.
let count = false
const modals= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
function reply_click(clicked_id)
{
var found = modals.find(function (element) {
return element == clicked_id;
});
jQuery( document ).on( 'elementor/popup/show', (event,id, instance) => {
const hide = document.querySelector(`#elementor-popup-modal-${id}`)
hide.style.setProperty('background-color', 'rgba(0,0,0,.8)', 'important');
count= true
});
jQuery( document ).on( 'elementor/popup/hide', (event,id, instance) => {
const hide = document.querySelector(`#elementor-popup-modal-${id}`)
hide.style.setProperty('background-color', 'rgba(0,0,0,.2)', 'important');
count=false
});
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
if(found > 1){
found= found -1;
if(count){
document.getElementById(`${found}`).click()
}}}
else if (e.keyCode == '39') {
if(found < 29){
found= found +1;
if(count){
document.getElementById(`${found}`).click()
} }}
}
}