How to get response with fancybox?

Question

JavaScript

At certain events, the user needs to display a fancybox modal window in which to give the user the choice of "Yes" and "No" and you need to get what he clicked.
You can hang events on the "Yes" and "No" buttons, but this is not what you need.

Answer 1

I usually make my own alert and confirm , which pop up messages in modals.
You can use either callback functions or Promise to handle the closure .
Usage with Promise looks like this:

Confirm("Да или Нет?").then((result) => {
  if (result) {
    console.log("Пользователь согласен на всё.");
  }
  else
  {
    console.log("Пользователь что-то подозревает.");
  }
});

Inside, you still cannot do without handlers, but if there is only one window call function, then this is not critical:

function Confirm(message) {
  let p = new Promise((resolve, reject) => {
    // тут код создания окна
    // $.fancybox({ 
    //   modal: true,
    //   content: '<div>' + message + '</div>'
    // });
    // в обработчики кнопок нужно добавить вызов resolve
    // true - если пользователь нажал Ok
    // resolve(true);
    // false - если пользователь нажал Отмена
    // resolve(false);
  });

  return p;
}

If you wish, you can make your own analogue of Promise , although it makes no sense, the ready-made one is quite suitable for solving such a problem.
Here is a more complete working example :

function Confirm(message) {
  return new Promise(function(resolve, reject) {
    var buttons = $('<div class="buttons" />');
    var btnOk = $('<button class="btn btn-default">Ok</button>');
    var btnCancel = $('<button class="btn btn-default">Отмена</button>');
    var content = $('<div />');

    btnOk.click(function() { 
      resolve(true);
      $.fancybox.close(); 
    });
    
    btnCancel.click(function() { 
      resolve(false); 
      $.fancybox.close();
    });

    content.append('<div class="message" />');
    content.append('<hr />');
    content.append(buttons);
    
    $('.message', content).html(message);
    
    buttons.append(btnOk);
    buttons.append(' ');
    buttons.append(btnCancel);
    
    $.fancybox({ 
       modal: true,
       content: content
    });
  });
}

Confirm('Вы согласны с этим решением?').then(function(result) {
  if (result) {
    $('body').append("<h1>Отлично!</h1>");
  }
  else  {
    $('body').append("<h1>Очень жаль...</h1>");
  }
});

Answer 2

well yes. do not hang up events on buttons. find out psychically what the user pressed)

Answer 3

Well, you can write your own event manager that will save events when something is clicked and if you need to execute them. Let's say I recently solved the problem of Google Analytics + Yandex Metrika when clicking, opening something or other events. I wrote an extensible EventManager in typescript and now you can add there not only Google, Yandex events, but any events inherited from the interface. Stored them in localStorage or cookies in a serialized form. I can share the code.