Ive been messing with this a while and have tried numerous ways. It still wont work.

function popupConfirm(widtH, texT, callback){ 
var top=(window.innerHeight/2) - 100;
var left=(window.innerWidth/2) - (widtH/2);
var r="<div id='standard-modal' style='width:"+widtH+"px;top:"+top+"px;left:"+left+"px;'>";
        r+="<div id='standard-modal-header' style='width:"+(widtH-4)+"px;'>";
        r+="<strong>&rarr; &nbsp; Icon Box &nbsp; &larr;</strong>";
        r+="</div>";
        r+="<div id='standard-modal-message' style='width:"+(widtH-30)+"px;'>"+texT+"</div>";
            r+="<div id='button_wrapper'><div id='standard-modal-button' class='left_button' onclick='$(\"#standard-modal\").remove();' >CANCEL</div>";

            // following line attaches callback to onclick event        
            r+="<div id='standard-modal-button' class='right_button' onclick='callback();' >CONFRIM</div></div>";
        r+="<div style='clear:both;'></div></div>";

$('body').append(r);
}


popupConfirm(300,'blah blah' , function(){alert("finally");});    

in theory, i want it to do the alert once the user clicks confirm in my popup... any help is appreciated.

its logs to the console 'callback is not defined'

Ive been messing with this a while and have tried numerous ways. It still wont work.

function popupConfirm(widtH, texT, callback){ 
var top=(window.innerHeight/2) - 100;
var left=(window.innerWidth/2) - (widtH/2);
var r="<div id='standard-modal' style='width:"+widtH+"px;top:"+top+"px;left:"+left+"px;'>";
        r+="<div id='standard-modal-header' style='width:"+(widtH-4)+"px;'>";
        r+="<strong>&rarr; &nbsp; Icon Box &nbsp; &larr;</strong>";
        r+="</div>";
        r+="<div id='standard-modal-message' style='width:"+(widtH-30)+"px;'>"+texT+"</div>";
            r+="<div id='button_wrapper'><div id='standard-modal-button' class='left_button' onclick='$(\"#standard-modal\").remove();' >CANCEL</div>";

            // following line attaches callback to onclick event        
            r+="<div id='standard-modal-button' class='right_button' onclick='callback();' >CONFRIM</div></div>";
        r+="<div style='clear:both;'></div></div>";

$('body').append(r);
}


popupConfirm(300,'blah blah' , function(){alert("finally");});    

in theory, i want it to do the alert once the user clicks confirm in my popup... any help is appreciated.

its logs to the console 'callback is not defined'

• javascript
• jquery

• what is it supposed to do, and how does it 'not work'. – Hamish Commented Jan 26, 2012 at 21:27
• as i said, its supposed to do the alert when the user clicks confirm. what its doing is logging 'callback is not defined' – Johnny Craig Commented Jan 26, 2012 at 21:29

4 Answers 4

This is a classic scoping problem, when you append your string to the body then the user clicks on the div the onclick is trying to fire a function called window.callback(). Instead of using inline javascript which isn't a good idea in general anyways is bind the click handler after the html is created.

...
        // following line attaches callback to onclick event        
        r+="<div id='standard-modal-button' class='right_button'>CONFRIM</div></div>";
    r+="<div style='clear:both;'></div></div>";

    $('body').append(r);
    $('#standard-modal-button').bind('click', callback);
}

I would use click() instead of trying to put the callback in your function.

$('.right_button').on('click', function() {
    alert("finally");
});

I don't even know where to begin telling you what to change, except for everything. First I'd start off actually creating that div as part of the page and hide it. When it should be shown; you can simply do $('#standard-modal').show();. You can then do what has been suggested in other answers like :

$('#cancel-btn').click(function(){
    alert('your message');
});

If you are still having issues, check out jqueryUI http://jqueryui./demos/dialog/

a bit dangerous but:

 r+="<div id='standard-modal-button' class='right_button' onclick='eval('(" + callback.toString() + ")()');' >CONFRIM</div></div>";