How to implement the confirm dialog from Fancybox 3?

Question

I'm a huge fan of Fancybox and I'm using it for years now. At the moment I'm thinking of installing the newest version and I want to use the confirm dialog that is demoed on the project page of Fancybox 3 (https://fancyapps.com/fancybox/3/). But I don't understand how to do this. Where can I find settings for this, how to initiate the dialog and where does the content that is in the dialog come from?

Answer 1

Basically, you display some inline content as usual and then use afterClose callback to check what element was clicked to close the modal (tip: add data-fancybox-close attribute to any element to act as close button), something like this:

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

    // Here you can choose what to do depending on the element
  }

Here is a more complete code - https://codepen.io/fancyapps/pen/YRPoVB?editors=1010 - that is used on the homepage.