Allow `overlay_close` on Confirmation Modaal

[nicolasmn]

Confirmation Modaals can't be closed by clicking the overlay background, even after setting overlay_close: true and is_locked: false.

From the website (emphasis mine):

[...] By default once open, it can not be closed until an action has been selected (such as Confirm/Cancel).

From that wording I think the current behaviour is a bug.

[danhumaan]

Hi @nicolasmn, this was intentional for the confirmation modaals, and I don't believe it to be a bug. The current wording is accurate to what you have described also.

It's intention was to be as close to a standard javascript confirm popup as possible. Once it's open you can't do anything until you made a decision. A use case for this would be if you're editing a large form that, should the user want navigate away from the form, the modaal could prompt them "you have unsaved changes, are you sure you want to leave? - Yes/No".

That all that said though, maybe there's an opportunity to provide extra flexibility here. I can't confirm or provide a timeline on anything but I'll update the label to be an enhancement so we can factor it into future improvements.

For now, if you don't need a modaal as strict as the confirmation, but want some sort of action within it, you could use a standard inline modaal and a custom button inside which actions the close (and other call back events, before and after close for example). This is typically what we at Humaan use for Modaals that could contain an action but it's not mandatory.

[nicolasmn]

Thank you for your answer. I totally understand the intention behind this decision, however I do't see a reason why it shouldn't be possible to change the default behaviour.

I solved this for me by attaching a click listener to the Modaal wrapper in the after_open callback and calling the close method like this:

$element.modaal({
  type: 'confirm',
  after_open: (modal_wrapper) => {
    const $modal_wrapper = $(modal_wrapper);
    const $modal_content = $modal_wrapper.find('.modaal-content');
    $modal_wrapper.on('click', event => {
      if ($modal_content.has(event.target).length === 0) {
        $modal_wrapper.off('click');
        $element.modaal('close');
      }
    });
  }
});

See in JSFiddle