Popup Keyboard Control

by NPD

 
 
                
 1let count = false
 2 
 3const 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]
 4 function reply_click(clicked_id)
 5  {
 6 var found = modals.find(function (element) {
 7        return element == clicked_id;
 8    });
 9jQuery( document ).on( 'elementor/popup/show', (event,id, instance) => {
10const hide = document.querySelector(`#elementor-popup-modal-${id}`)
11hide.style.setProperty('background-color', 'rgba(0,0,0,.8)', 'important');
12count= true
13});
14 
15jQuery( document ).on( 'elementor/popup/hide', (event,id, instance) => {
16const hide = document.querySelector(`#elementor-popup-modal-${id}`)
17hide.style.setProperty('background-color', 'rgba(0,0,0,.2)', 'important');
18count=false
19});
20 
21document.onkeydown = checkKey;
22 
23function checkKey(e) {
24    e = e || window.event;
25 
26   if (e.keyCode == '37') {
27if(found > 1){
28found= found -1;
29if(count){
30    document.getElementById(`${found}`).click()
31}}}
32    else if (e.keyCode == '39') {
33if(found < 29){
34found= found +1;
35if(count){
36    document.getElementById(`${found}`).click()
37}   }}
38}
39}

1

Snippet Description:

Designed to allow visitor to navigate between popups (originally triggered by a button in a Unlimited Elements timeline widget).

Snippet Details:

Current status

Public

This snippet has passed basic review, use with caution and at your own risk. See details provided by author in sidebar and click below to find out more.

Language

Javascript

Codevault
NPD
Category

JavaScript

Rating
Voted: 1 by 1 user(s)
Wordpress Compatability
Not Specified
Set-up instructions

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.

Further Information

The author has provided the following URL that may be helpful to setting up or using this snippet:

Author Profile URL:
Snippet Source:

Related Snippets: