How to create synchronous functions to get the same behavior as confirm?

Question

I’m trying to recreate the javascript native confirm component and came across a question.

Example:

if (confirm("meu texto vai aqui")) { // Aguarda retorno {true ou false}
  console.log("faça algo aqui");
}

By default, as long as the user does not click OK or Cancel it will not return to the if stream. in this case I am trying to play it.

Example:

function msgConfirm(texto) {
  var resposta = $(".resposta");
  resposta.empty();
  var modal =
    "<div class='modal fade msgConfirm' tabindex='-1' role='dialog'>" +
    "   <div class='modal-dialog  modal-sm' >" +
    "      <div class='modal-content' >" +
    "         <div class='modal-header' >" +
    "            <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'> &times; </span></button >" +
    "            <h4 class='modal-title' id='msgConfirmTitle'> </h4>" +
    "         </div>" +
    "         <div class='modal-body'>" +
    "            <p id='msgConfirmContent' > </p>" +
    "         </div>" +
    "         <div class='modal-footer' >" +
    "            <button type='button' class='btn btn-primary' id='msgConfirmConfirm' > Ok </button>" +
    "            <button type='button' class='btn btn-default' data-dismiss='modal' id='msgConfirmCancel' > Cancelar </button>" +
    "         </div>" +
    "      </div>" +
    "   </div>" +
    "</div>";

  resposta.append(modal);
  resposta.find("#msgConfirmContent").html(texto);
  resposta.find(".msgConfirm").modal("show");

  $("#msgConfirmConfirm").click(function() {
    return true;
  });
}

And the moment I call it the return is given, without intervention of the event listener click.

if (msgConfirm("meu texto vai aqui")) { // Retorno imediato {undefined}
  console.log("faça algo aqui");
}

So what I need to know and, how can I reproduce the behavior of confirm?

Answer 1

The difference between your logic and that of confirm is that it is synchronous and your modal is asynchronous. That is when the browser uses the confirm native everything stops and the variable that receives the return of the browser is not set until we click. In your code you have to create an asynchronous logic because msgConfirm("meu texto vai aqui") is a function that opens a modal and launches an event headphone, and nothing else... in the eyes of the function your work is done and returns.

You can do it like this:

msgConfirm("meu texto vai aqui");
$("#msgConfirmConfirm").click(function() {
    // a partir daqui sabes que foi clicado 
    // e podes chamar a próxima função no código
});

You can add a logic like that to your own modal also:

msgConfirm("meu texto vai aqui");
$("#msgConfirmContent").click(function() { // <- repara que usei #msgConfirmContent
    if (e.target.id == 'msgConfirmConfirm'){
        // fazer algo caso clique no OK
    } else if (e.target.id == 'msgConfirmCancel') {
        // fazer algo caso clique no CANCEL
    } else {
        // fazer algo caso clique noutro sitio...
    }
    // e podes chamar a próxima função no código
});