Modal and comparison with Fancybox 3

[damiensan]

Hello,

is the modal option available in fancybox 4 ?

In fancybox 3, I could set data-value="1" for the valid button, data-value="0" for the cancel button.
Each button had data-fancybox-close

Then I used the event

afterClose: function (instance, current, e) {
  var button = e ? e.target || e.currentTarget : null;
  var value = button ? jQuery(button).data('value') : 0;
    
  opts.callback(value);
}

and my callback was simply following the link value

It does not seem possible to achieve this with fancybox 4.

Regards

[fancyapps]

Hi,

You can archive the same functionality using shouldClose event, just make sure you are using the latest version.

Fancybox.bind('[data-fancybox="trigger-modal"]', {
  closeButton: false,
  dragToClose: false,
  click: false,

  on: {
    shouldClose: function (fancybox, event) {
      const value =
        event && event.target ? parseInt(event.target.dataset.value, 10) : 0;

      console.log(`value: ${value}`);

      if (value !== 1) {
        return false;
      }
    },
  },
});

Demo - https://fancyapps.com/playground/1W2
(Note: That demo will work fine after CDN will update to the latest)

[damiensan]

Thank you.

[brendon]

In a similar vein, with Fancybox 5, it appears this is the best group of options to simulate the old modal: true option in Fancybox 3:

{
  closeButton: false,
  dragToClose: false,
  backdropClick: false,
  keyboard: false
}

Is this correct or is there more to consider? I've tested it and it seems to work well. I have a button that triggers a Fancybox.close() to close the "modal".

[brendon]

Sorry, I should add that I'm using type: 'html' with supplied HTML, so not multiple image slides or anything.

[fancyapps]

@brendon Hi, That looks fine to me, I can not think of any other case. Also, you could use shouldClose event, like this - https://jsfiddle.net/onb4h0re/

[brendon]

Thanks @fancyapps :)