Hi Freek, 

There is no default option to close the reactive popup by pressing the esc key. You need to create event for the popup like Onkeypress or Onkeyup to trigger event. After that it will be possible to close popup by esc key..  

Hi Freek,

You can add below script using JS block on onReady event of the screen

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {
        $actions.Hide();
    }
};

In the $Action.Hide client action just set the show pop variable to false.

Hi freek!

That's a good question! I tried with the event OnKeyPress but I did not work.
The only solution that I can imagine by now is for you to build a JS script with a key listener that hides the popup. You will need to pass the Widget Id so that the JS code recognize the HTML object.

Hope it helps you.

Cheers

document.addEventListener('keydown', function(event){
if(event.key === "Escape"){
if($parameters.increment===1){
$actions.PopupClose()
}
}
});

In the $Action.PopupClose client action just set the show pop variable to false.

Hi, is there any possible way to close the popup dialog by clicking outside the popup dialog/popup dialog container?

havent test it but something like this maybe?

// Add a click event listener to the document to listen for clicks

document.addEventListener('click', function(event) {

    // Check if the clicked element is not inside the popup

    var popup = document.querySelector('.popup'); // Replace '.popup' with the correct selector for your popup

    if (!popup.contains(event.target)) {

        // Click was outside the popup, close the popup

        $actions.PopupClose(); // Call your function here to close the popup

    }

});

// Add a keydown event listener for the Escape key

document.addEventListener('keydown', function(event) {

    if (event.key === "Escape" && $parameters.increment === 1) {

        $actions.PopupClose(); // Call your function here to close the popup

    }

});