Custom confirmar botão com promessa jquery - javascript, jquery, promessa

Estou tentando criar um pop-up de confirmação personalizado no jquery, criei uma função que mostra o alerta personalizado quando solicitado com um texto e dois botões: ok, cancelar:

function showprompt(content){
$("#confirm").css("display","block");
$("#msg").text(content);
}

O problema é que posso esperar até que o botão seja clicado e voltar o resultado, se ok retornar verdadeiro? Eu estava pensando que preciso usar a promessa e adiar. Como eu posso fazer?

Não gosto de usar botões de confirmação pré-criados com plug-ins JQuery UI - Dialog

Respostas:

Uma promessa é uma ótima ideia para esse tipo de funcionalidade (eles não são apenas para assíncronos!). Digamos que você tenha dois botões dentro de #confirm são chamados #ok e #cancel.

É assim que ficaria:

function showprompt(content) {
var dfd = $.Deferred();

$("#confirm").css("display","block")
$("#msg").text(content);

$("#confirm")
//turn off any events that were bound to the buttons last
//time you called showprompt()
.off("click.prompt")

//resolve the deferred
.on("click.prompt","#ok",function() { dfd.resolve(); })

//reject the deferred
.on("click.prompt","#cancel",function() { dfd.reject(); });

//return a the deferred"s promise
return dfd.promise();
}

Então você usaria assim:

showprompt(content).then(
function() { alert("You clicked ok"); }, //promise resolved
function() { alert("You clicked cancel"); }, //promise rejected
);