If I may, I'm currently using Popups for Divi plugin on my WordPress website and I'm facing an issue where the popup closes when the ESC key is pressed. My use case requires that the popup should remain open until a valid secret key is entered by the user.
Unfortunately, none of these methods have successfully prevented the popup from closing when the ESC key is pressed.
Any guidance or suggestions on how I might prevent the ESC key from closing the popup until the user has entered a valid secret key would be greatly appreciated.
I've also reached out to the plugin's support team and am eagerly awaiting their response.
Here is a simplified version of my code:
let secretKeyField = document.getElementById('mce-SECRETKEY');
let mailerlite = document.getElementById('mailerlite-form-container');
let secretKeyError = document.getElementById('secret-key-error');
let secret_key_form = document.querySelector('#secretkeywrapper');
secretKeyField.oninput = function() {
if (this.value == atob(get_secret_key_by_pathname)) {
secretKeyError.style.display = 'none';
mailerlite.style.display = 'block';
secret_key_form.remove();
} else {
secretKeyError.style.display = 'block';
mailerlite.style.display = 'none';
}
};
let e = document.querySelector('.row-success');
let observer = new MutationObserver(function (event) {
DiviArea.hide('mypopupid');
});
observer.observe(e, {
attributes: true,
childList: false,
characterData: false
});
<style>
#mailerlite-form-container {
display: none;
}
</style>
<div id="secretkeywrapper">
<label for="mce-SECRETKEY">Enter your secret key to get access:</label>
<input type="type" id="mce-SECRETKEY" name="SECRETKEY" />
<div id="secret-key-error" style="display: none; color: red;">The secret key is incorrect. Please try again.</div>
</div>
<div id="mailerlite-form-container">
[divi_shortcode id="931"]
</div>