Close popup when clicking next to it

[AIC-BV]

Close popup when clicking next to it

[AIC-BV]

Can probably be optimised by reusing the right function but I couldn't find how to call it without having undefined error

[LukeTowers]

@AIC-BV would you be able to provide a screen recording of the new behaviour?

[bennothommo]

@AIC-BV does this functionality make it if you click on the translucent overlay, it closes the modal? I'm not a big fan of that at all - too many times, people mis-click and miss something important (or lose a completed form if the modal contains one).

[AIC-BV]

@AIC-BV does this functionality make it if you click on the translucent overlay, it closes the modal? I'm not a big fan of that at all - too many times, people mis-click and miss something important (or lose a completed form if the modal contains one).

That is the case! For me it is good UX

[AIC-BV]

@LukeTowers

Bewerk.bestelling._.AIC.BV.-.Google.Chrome.2024-02-21.09-17-56.mp4

[AIC-BV]

It is a read only popup relation and it is very annoying if you can't click next to it 😆

[bennothommo]

@AIC-BV

That is the case! For me it is good UX

Apologies, but I strongly disagree.

I would begrudgingly allow it for "message" modals, where an action has already occurred and the modal is simply letting the user know it's done - albeit, a flash message would generally be better in this case and those can already be easily dismissed. Definitely not for any modal that requires user interaction or attention, ie. a modal form, a confirmation modal where the user has to Yes or No, or an error message.

I would only accept this PR if such modal behaviour were optional (ie. could be defined by configuration) and by default, it was disabled.

[AIC-BV]

@bennothommo
If acceptable I can adjust #1044 to add variable "closeModalWhenClickingNextToIt". Could do with a better name.

And then update this PR to

if (this.options.closeModalWhenClickingNextToIt) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {
            modal.hide()
            $('.popup-backdrop').remove()
            $(document.body).removeClass('modal-open')
        }
    });
}

Let me know

[bennothommo]

That'd be all good. Maybe allowDismiss as the option? Or closeOutside?

[AIC-BV]

Added in this PR
#1044