I am trying to create a custom confirm box to match look & feel of my website here is my code...
customconfirm.js
function CustomConfirm(dialog){
console.log("in CustomConfirm")
var result;
console.log("in render")
var winW = window.outerWidth;
var winH = window.outerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * 0.5)+"px";
dialogbox.style.top = "250px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = '<img src="" alt="logo" height="20" width="20"> Heading';
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirmyes()">Yes</button><button onclick="Confirmno()">No</button>';
console.log("render end")}
function Confirmno(){
console.log("in no")
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
processResult(false);
console.log("no ended");}
function Confirmyes(){
console.log("in yesss")
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
processResult(true);
console.log("yes ended");}
function processResult(r) {
result = r;
alert(result);
return result;}
I am calling my function as below:
var r = CustomConfirm("Do you really want to delete Player\n'" + player_name + "' ?");
if (r == true){
console.log(r);
}
elseif (r == false){
console.log(r);
}
console.log("Result = " + r);
whenever I am calling CustomConfirm, it is always showing 'Result = Undefined' in console.(rather than true or false), means it is not waiting for user selection of yes or no.
How can I pause the CustomConfirm function so that i can store the value in r & do next thing with that value?