Public

Name

Popup Keyboard Control

About

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

Language

Javascript

Rating

Voted: 1 by 1 user(s)

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.

Codevault

NPD

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: Not Specified

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

18/09/2022

Important Note

This snippet has the following 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.

Popup Keyboard Control

 
                    
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

Related Snippets

Please see some snippets below related to this snippet..

JavaScript

Unverified

0

OTP or MFA using SSJS in SFMC

Added: 3 months ago

Last Updated: 3 months ago

JavaScript

Unverified

1

Browser Tab Message

Added: 1 year ago

Last Updated: 1 year ago

This snippet replaces the text in the Browser Tab with one of your own whenever the browser tab is not in focus.

JavaScript

Unverified

0

Divi Accordion Close by Defaulty

Added: 9 months ago

Last Updated: 9 months ago

Sets all tabs in the divi accordion to close by default

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

JavaScript

Public

1

Popup Keyboard Control

Added: 2 years ago

Last Updated: 2 years ago

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

Styling

Public

0

3-D Text with Glow

Added: 2 years ago

Last Updated: 1 year ago

CSS to give a 3-D effect to text/headers (all CSS is included, because we hand-wrote it in Codepen. Omit font styling as appropriate. ..