從定製警報

Question

可能重複返回值：
How to create TRULY modal alerts/confirms in Javascript?

TL; DR：我已經覆蓋了基於自定義HTML一個默認alert()功能。我希望新對話仍然阻止執行，並讓我的對話中的按鈕返回true或false從調用到alert()以在邏輯中使用（並繼續執行）。

---

我想實現一個自定義警告框，它與具有相同（或類似）功能的一個很好的主題框替換默認瀏覽器的警報。

我讀過this的問題，我正在使用this answer（針對同一個問題）給出的解決方案。我想現在要做的是讓我重寫警惕返回if()語句中使用的true或false值，這取決於是否OK或Cancel被點擊：

if(alert('Confirm?') { 
    // Do stuff 
} 

然而，由於有自定義HTML而不是正常警告我不能做有兩個原因如下：

• 我不能從更換對話框按鈕返回一個值（點擊與$.on()必然事件），因爲我不知道怎麼樣。
• 據我所知，我無法用此警報阻止程序流程。

我必然$.on()事件在更換對話Cancel和OK按鈕其中隱藏的框。這些工作正常，但我現在遇到的問題是當單擊按鈕時返回值，以便執行將暫停，直到用戶執行操作。

HTML：

<div class="alert background"></div> 

<div class="alert box"> 
    <div class="message"></div> 

    <hr> 

    <div class="buttons"> 
     <input type="button" name="cancel" value="Cancel"> 
     <input type="button" name="confirm" value="OK"> 
    </div> 
</div> 

當前的JavaScript：（在我的鏈接的問題的答案几乎是一個抄送）

(function() { 
    nalert = window.alert; 

    Type = { 
     native: 'native', 
     custom: 'custom' 
    }; 
})(); 

(function (proxy) { 
    proxy.alert = function() { 
     var message = (!arguments[0]) ? 'null' : arguments[0]; 
     var type = (!arguments[1]) ? '' : arguments[1]; 

     if (type && type == 'native') { 
      nalert(message); 
     } else { 
      // Custom alert box code 
      console.log(message); 
     } 
    }; 
})(this); 

理想情況下，我希望能夠把像這樣在// Custom alert box code部分：

$('.alert.box input[name="confirm"]').on('click', function() { 
    // Hide dialogue box - I can do this already 

    // *** Return `true` or other truthy value from 
    // alert for use in `if()` statements 
}); 

因此，當單擊按鈕OK或Cancel時，它將刪除自定義警報框並從調用返回true或false值到alert()。我已經可以通過$.fadeOut()和$.remove()刪除警報，這很容易。什麼不是知道如何讓按鈕點擊事件得到alert()（覆蓋）返回的東西。

我試過儘可能清楚，但我可能錯過了一些東西。請讓我知道，如果我有。

Answer 1

下面的例子示出了一個方法來創建自定義提醒和處理用戶選擇

/* 
    message = String describing the alert 
    successCallBack = callback function for when the user selects yes 
*/ 
function exampleAlert(message, successCallback) 
{ 
    /*Alert box object*/ 
    var alertBox = document.createElement("div"); 

    /*Alert message*/ 
    var msg = document.createElement("div"); 
    msg.innerHTML = message; 

    /*Yes and no buttons 
     The buttons in this example have been defined as div containers to accentuate the customisability expected by the thread starter*/ 
    var btnYes = document.createElement("div"); 
    btnYes.innerHTML= "Yes"; 

    /*Both yes and no buttons should destroy the alert box by default, however the yes button will additionally call the successCallback function*/ 
    btnYes.onclick = function(){  $(this.parentNode).remove();successCallback();} 
    var btnNo = document.createElement("div"); 
    btnNo.innerHTML= "No" 
     btnNo.onclick = function(){ $(this.parentNode).remove();} 

    /*Append alert box to the current document body*/ 
    $(alertBox).append(msg, btnYes, btnNo).appendTo("body"); 
} 

function test() 
{ 
    alert("Example alert is working, don't use this test as a replacement test - horrible recursion!") 
} 
exampleAlert("shoe", test) 

這是相當基本的和不允許的附加數據的結果被供給到回調函數和因爲這個原因對於生產並不理想，但是jQuery的.bind（）和類似的方法允許數據與回調方法相關聯

值得注意的是，儘管上面顯示了問題的完整實現，但事實上實際上只有兩條線很重要。

btnYes.onclick... 
btnNo.onclick... 

由於我們通過綁定onclick事件分別爲true和false來實現期望的結果，所有其他內容都是爲了繪製圖片。

考慮到這一點，可以有效地把任何容器對象至少有一個兄弟到一個警告框eaxmple：

<!-- Example html --> 
    <div id='a'> 
     <ul> 
     <ul> 
      <li>Something</li> 
      <li>Something Else</li> 
      <li id='yesIdentifier'>Something not necessarily suggesting a trigger?</li> 
     </ul> 
     </ul> 
    </div> 

只要你是/否（如果不存在）選項銷燬可以用幾行代碼處理將容器轉換爲警告框的適當容器。

$('#yesIdentifier', '#a').click(
     function(){ someCallback(); $(this).closest('#a').remove()}); 

以上都不是示例模型的實現，但應該提供一些關於如何去完成任務的想法。

終於......你真的需要更換本地警報方法嗎？也就是說，要麼編寫警報調用，在這種情況下，您應該知道要使用自定義方法，要麼覆蓋默認行爲，但不能保證其他開發人員會知道。

總體建議：

我覺得這個最好的方法是創建一個jQuery插件，它在飛行中創建自定義提醒，而不是插件中跟蹤回調，結果什麼。

SOliver。

Answer 2

你爲什麼不用像這樣的確認框。

var c = confirm('Confirm?'); 

if(c) 
{ 
    // Yes clicked 
} 
else 
{ 
    // No clicked 
} 

或者你可以使用jQuery UI的對話框確認框。

http://jqueryui.com/demos/dialog/#modal-confirmation