Prevent modal / popup from closing when clicking outside

[SimonJakob21471]

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');

});

[SimonJakob21471]

Thanks Akshay

 

It works :)

[JaredJoshua]

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

[CarlHolmes]

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’);
});

[JaredJoshua]

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

[CarlHolmes]

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.

[JaredJoshua]

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

[CarlHolmes]

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

[JaredJoshua]

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

[CarlHolmes]

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

[Grant]

Does anyone know how to apply this to inline editing pop ups?

I can see in the source a couple of elements (drop-content, kn-popover) - but I can’t seem to see an equivalent background element to kn-modal-bg in the source to prevent the user clicking on it.

[Ward]

Thanks for the notes about the character change when working from a mac - that was spot on. Here is a paste of the code with the corrected characters for copy and paste from a mac.

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

[PhilWesley67576]

I’d suggest this be an option when choosing modal from the UI!!! Can’t see why they wouldn’t option it rather than having to code it,

[Andrew_Matsen]

I am a bit stumped. I am using the exact code mentioned, but it is not working in my app. I have it as the first script loaded. Any ideas?

// Prevent Modals from Closing with a Click

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

[CarlHolmes]

Looks ok to me? I’ve been using it for several years without issue

[Kara]

Would you all find it more useful if all modals just don’t close, or would you want the option for each scenario?

[KnackPros]

Would you all find it more useful if all modals just don’t close, or would you want the option for each scenario?

I personally think we need the choice.

Making it harder to close a modal can be appropriate when:

• You’re filling out a long form, and don’t want to accidentally close the modal and lose your changes.
• You’re doing a critical task

But there are other ways we use modals that don’t fit the above

• Viewing more details
• Confirming an action
• “Quick Views” or previews
• Filters, Export etc.

Basically when you want to stay in the flow and return to your previous task, it’s quicker to just click outside the modal to close it than focus your cursor on a small X icon IMO.

[CarlHolmes]

Hi @Kara - totally agree with Ian, allowing the user the option of either “popup” or “modal popup” would be my preference.
Just listened to the video and noticed I said the code goes into the CSS section, obviously I meant the JavaScript section

[PeterJurgen]

Providing options gives the builder flexibility. In this case modal or modeless, or perhaps as Carl says modal or popup.

[PhilWesley67576]

Pardon my 2cents. But this seems like an easy feature to add that just makes sense, this isn’t a code rewrite and has been needed for years.

I think the dev team should build some real world apps in knack to feel the processes required. I add the above JS in every app because it drives my clients mad when accidentally click out the modal