Make dismissing a modal pop-up by clicking outside window optional

Feature Requests
, ,
1

As a Knack user, I want to know that there is consistency in my mouse actions. Some examples:

  • mouseup (release not click) outside a Rich Text editor in Chrome closes window and does not save edits; see attached gif
  • clicking outside a modal window to close a record view or a table view can be helpful, but not when you're editing and lose your work
  • could this be app / page / view set?

2

Thanks for sharing Matt - we've needed to implement this for a while and just got around to it.

Still works perfectly.

3

This was also an issue for us especially with longer forms.

I asked support and Odalis replied back with the following Javascript snippet - which appears to be working perfectly. 

Give it a try;

 

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

Has anyone found a solution to this? This seems like it would be relatively simple for Knack to implement. It is incredibly frustrating because if you quickly select text and your pointer slightly goes off screen it will close the modal pop-up and lose all the data in the form.

 

We tried adding this JS: 

$(document).on('knack-scene-render.any', function(event,page) {

$('#kn-modal-bg-0').modal-content({backdrop: 'static', keyboard: false})

});

but it didn't have the intended result.

5

This seems to affect a number of our users on some date entry intensive forms. We have a form which gives users the option to add a linked connected record as a new option, rather than selecting an existing record from the drop down. This seemingly can only be displayed in a modal, and one errant click will lose a lot of work for people using the forms.

 

It's depressing to have to advise users to type everything in a word processor and copy it across, but that's really all I can do here.

6

Just experienced this 3 times when using a modal popup on an iPad. In fact at least once it closed when I actually clicked WITHIN the box, trying to click submit. So agree with Eric, needs attention, especially on touch screen. Thanks

7

Yes, that’s our recommendation, thank you for adding that here!

/* Change the below scene_1 to the specific scene for your application or use `any` to enable for all scenes */
  $(document).on('knack-scene-render.scene_1', function(event, scene) {
    $('.kn-modal-bg').off('click');
  });