Prevent modal / popup from closing when clicking outside

Hi

Anyone who knows how to prevent a modal page /popup from closing when the user clicks outside the modal.

I have tried with this piece of code, but it doesn't do the job for me

$(document).on('knack-scene-render.schene_57', function(event, scene) {
$('.kn-modal-bg').off('click');
});

Thanks Akshay

 

It works :)

Does this code not work anymore?

I have been using this line of code which worked really well with popup forms.

I haven’t touched the code since a year ago

The above code posted by Simon is correct, although “scene” is the correct spelling, rather than “schene”.

To just target a particular modal you can use the scene number, as shown on the below screenshot.

The code for this is:

//Prevents clicking off a Popup Modal
$(document).on(‘knack-scene-render.scene_xxx’, function(event, scene) {
$(’.kn-modal-bg’).off(‘click’);
});

(Change scene_xxx to your scene number, example from below would be “scene_19”)

To set Globally for your whole App

//Prevents clicking off any Popup Modal
$(document).on(‘knack-scene-render.any’, function(event, scene) {
$(’.kn-modal-bg’).off(‘click’);
});

Thanks Carl.

I actually have the global snippet of code you posted in my app.

It’s the same snipper of code I’ve been using since last year.

I am not too sure why it suddenly stopped working

Hi Jared,

I use this snippet in all my client apps and it works fine. If you have the same code there is no reason it won’t work for you too.
It’s worth noting that if a modal dialogue box has page rules to show/hide fields, or fields, like a connected drop down that has filters, then it is possible to click outside the modal and it closes before all the rules have run. I think the JavaScript runs after the rules.

This has affected all apps with the piece of code.

Most of the pages don’t have rules on them.

I’ve even filled out a form which took a couple of minutes and then mistakenly clicked outside the dialogue box which resulted in the form closing and losing the entry.

But, if you are saying the code still works in all of your apps, then I will need to see where I went wrong with the JavaScript

I’ve pasted the code we use below

$(document).on(‘knack-scene-render.any’, function(event, scene) {
$(’.kn-modal-bg’).off(‘click’);
});

Thanks for your prompt response Carl

Worth just checking this:

If it’s not this then I would suggest that there is conflicting code? I am not a coder but I may be able to link you up with a colleague, although if this requires detailed investigation it’s unlikely to be for free :blush:

Hi Carl,

I was able to locate the code conflicting with the popup form code.

Even though the form fully loaded and the code for the popup form was correct, there were pieces of code below that preventing the popup code from working.

This happened due to me trying to clean up unused code

Great news that you have found the conflicting code. Thanks for circling back on this one. :+1: