Can jQuery click event combine an callback?

Question

I want to display a confirm popup with OK button. Normally, if I don't want callback then OK button will hide popup and layer mask. When I callback then click OK button will do something in callback function.

function displayErrorPopup(message, callback) {
$("#error_popup_message").html(message);
display_popup($("#error_popup"));
if (callback && typeof (callback) === "function") {
    $("#error_popup_ok").click(function() {
        callback();
    });
} else {
    $("#error_popup_ok").click(function() {
        hideErrorPopup();
    });
}}

But the callback function run immediately when call:

displayErrorPopup('error message', function(){
do something;
hideErrorPopup();});

without OK button event click.

Please help me!! Thank!

Answer 1

function displayErrorPopup(message, callback) {
    $("#error_popup_message").html(message);

    display_popup($("#error_popup"));

    $("#error_popup_ok").click(function() {
        if (typeof callback == "function") {
            callback();
        } else {
            hideErrorPopup();
        }
    });
}

even more simplified way will be:

function displayErrorPopup(message, callback) {
    $("#error_popup_message").html(message);

    display_popup($("#error_popup"));

    $("#error_popup_ok").click(typeof callback == "function" ? callback : hideErrorPopup);
}

Answer 2

created a fancybox alert fiddle as per you comment. here is link jsfiddle refer it.

function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
    modal: true,
    content: "<h3>Confirmation:</h3><br/><div style=\"margin:1px;width:340px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;height:30px;width:80px;\" class=\"greenbtn\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;height:30px;width:80px;\" class=\"greenbtn\" type=\"button\" value=\"Ok\"></div></div>",
    afterShow: function() {
        $("#fancyConfirm_cancel").click(function() {
            ret = false;
            jQuery.fancybox.close();
        });
        $("#fancyConfirm_ok").click(function() {
            ret = true;                  
            jQuery.fancybox.close();
        });
    },
    afterClose: function() {
        callback.call(this,ret);
    }
});
}


function fancyConfirmAlert() {

   fancyConfirm("Are you sure you want to perform action.<br/><br/>",  function(ret) {
     alert('done + return values is -> ' + ret);
   });
 }

fancyConfirmAlert() ;