如何使功能如確認

Question

我想做自定義確認功能。

所以，我做出這樣的代碼：

function confirm(msg){ 
    var obj = document.createElement("div"); 
    var body = document.createElement("div"); 
    body.innerHTML = msg; 

    var foot = document.createElement("div"); 

    var ok = document.createElement("div"); 
    ok.innerHTML = "OK"; 

    var cancel = document.createElement("div"); 
    cancel.innerHTML = "Cancel"; 

    foot.appendChild(ok); 
    foot.appendChild(cancel); 
    obj.appendChild(body); 
    obj.appendChild(foot); 

    document.getElementsByTagName("body")[0].appendChild(obj); 

    ok.onclick = function(){ 
    return true; 
    } 

    cancel.onclick = function(){ 
    return false; 
    } 
} 

或

returnValue = -1; 
ok.onclick = function(){ 
    returnValue = true; 
} 

canacel.onclick = function(){ 
    returnValue = false; 
} 

while(true){ 
    if(returnValue !== -1) break; 
} 

return returnValue; 

如果這個自定義功能確認必須得到1個參數像原來確認的功能。

如何讓自定義功能確認？

Answer 1

就個人而言，我會用已經爲此寫了一third-party dialog，寫一個jQuery插件，或至少採取更加面向對象的方法。就目前而言，您正在將confirm函數放入global namespace（其中confirm函數已存在）。

另外請注意，你不能停止頁面的執行，等待像window.confirm可以響應。請參閱：How can I reproduce the "wait" functionality provided by JavaScript's confirm() function?（其中接受的答案是「你不能」）。

執行這種任務的可用的方法是使用一個回調：

function customConfirm(message, resultCallback){ 

    ok.onclick = function(){ 

     // note that you can pass whatever you want to the callback 
     // you are not limited to one parameter. 
     resultCallback(true); 
    } 

    cancel.onclick = function(){ 
     resultCallback(false); 
    } 
} 

在上述例子中，resultCallback是定義爲在確認框執行響應動作（一個或多個）事件的函數。

你可以通過一個消息和回調的對象來實現單參數目標，但我懷疑真正的目標是取代window.confirm哪些（如所述）的行爲不同。

{ message: "foo", callback: function bar(status){ alert(status); } } 

Answer 2

你不能讓你的confirm函數暫停，直到找到一個值，否則整個頁面都會凍結。你在這種情況下，需要的是提供一個回調執行一次任一按鈕被點擊的（如果你不能把它作爲參數以任何理由，你必須使用一個全局變量，或者一個隊列） ：

var queue = []; 
function confirm(msg){ 
    ... 
    var callback = queue.shift(); 
    ok.onclick = function(){ 
    callback(true); 
    } 

    cancel.onclick = function(){ 
    callback(false); 
    } 
} 

你使用這種方式：

queue.push(function(returnValue) { 
    if (returnValue) { 
     // Code for "yes" 
    } 
    else { 
     // Code for "no" 
    } 
}); 
confirm("Are you sure?");