Prevent modal / popup from closing when clicking outside

API & Customization
21

I’m lead to believe, after speaking with Kara, that this is an imminent feature update. You will be able to decide on a form by form basis whether it should close by clicking outside or not.

2 Likes
22

Have a solution here if I haven’t misunderstood. We can adapt the code to run for a array of specified scene so was hoping this was the solution people was looking for here.

This one just add the scene numbers and scenes you wish for the off click function to work leaving every other scene as normal. Recommended if only a few scenes otherwise see option below.

$(document).on('knack-scene-render.any', function(event, scene) {
   /* choose your scenes you wish NOT to close modal on offclick*/
    var scenesToApply = ['scene_*', 'scene_*', 'scene_*'];
    if (scenesToApply.includes(scene.key)) {  
        $('.kn-modal-bg').off('click');
    }
});

OR

If you want the .off('click') as standard applied everywhere but a few scenes not to use this then add the few scenes you wish not for the behaviour to continue

$(document).on('knack-scene-render.any', function(event, scene) {
    /* choose your scenes you DO wish to close modal on offclick*/
    var scenesToSkip = ['scene_*', 'scene_*', 'scene_*']; 
    if (scenesToSkip.includes(scene.key)) {
        return;
    }
    $('.kn-modal-bg').off('click');
});

OR

If you want the close modal off if modal contains a form only then you can use this. This just adds the .off('click') function if the modal contains a form otherwise will behave normally.

$(document).on('knack-scene-render.any', function(event, scene) {
    if ($('.kn-modal-bg').length > 0) {
        if ($('.kn-modal-bg .kn-form').length > 0) {
        console.log('modal has a form')
         $('.kn-modal-bg').off('click');
    }else{
        console.log('modal has no form')
        }
    }
});

Think I’ve covered most of it otherwise any questions just let me know

23

So it’s now Nov 2024. The modal pop-up options are there for pages you directly create.

However, I have a form to add a new option from a connected data table. This is created by the “Allow users to create new records to choose” check box on the input properties and renders as a hyperlink on screen under the dropdown. When you click this you automatically get the new option form in a pop up.

The thing is neither the new modal options appear nor this javascript solution seems to work. Any ideas Carl?

24

I can’t visualise the setup. Happy to connect on Zoom and take a look. :eyes:

25

Brill - Here’s my meeting room link if you are free?, I can screen share Launch Meeting - Zoom Of course can fix a time if not.

26

Hi Kevin, sorry only just seen your reply. I wasn’t expecting to jump on a Zoom immediately as I’m working on something else :wink: Can we schedule a call on Friday?

27

Of course Carl, no problem at all and thanks so much for agreeing to take a look. Let me know the best way to link up.

28

Hi @Kevin - Just circling back on this thread. We have just completed our Zoom call and with the assistance of Craig Winnall (@CSWinnall) have resolved your query with the below code snippet.

For others in the community that may see this post, the issue relates to adding an additional option on a form to a multichoice field. The modal that pops up can still be closed by clicking outside of the form. Before Knack introduced the option to decide on a form by form basis whether the form could be clicked outside to close, I used the JavaScript snippet that looked for a scene to render.

image
image688×432 59.3 KB

Original Code

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

After chatting this through with Craig, it transpires that the particular form that pops up for an additional multichoice option being added isn’t a scene, or a view. He has found that it can be targeted as simply a modal. The below code looks for any modal that is opened and prevents it from being closed.

Revised Code

 $(document).on("knack-modal-render", function (event, modal) {  
    $(".kn-modal-bg").off("click");
});
2 Likes
29

Thanks so much @CarlHolmes and @CSWinnall for the solution. Was pulling my hair out and you really helped with this!

2 Likes