Bootstrap Modal - 如果單擊是按鈕時返回True - 定製確認

Question

好吧，我花了整整一天的時間閱讀Q & A但仍無法完成。我需要創建一個自定義的確認（），其中，而不是默認的對話中，我使用的引導模式，如果用戶點擊Yes（是）返回true，對於號返回false

例子：

<a href="remove.php?id=3" onclick="return custom_confirm('Are you sure you want to remove this?');" />

和我自定義的確認功能是：

function custom_confirm(message) { 
    // put message into the body of modal 
    $('#modal-custom-confirmation').on('show.bs.modal', function (event) { 
    // store current modal reference 
    var modal = $(this); 

    // update modal body help text 
    modal.find('.modal-body #modal-help-text').text(message); 
    }); 

    // show modal ringer custom confirmation 
    $('#modal-custom-confirmation').modal('show'); 

    // if Yes button is clicked, return true 
    // if No button is clicked, return false 
    // logic here... 
} 

我的模式是在這裏：

<!-- modal: custom confirmation --> 
<div class="modal fade text-left" id="modal-custom-confirmation" tabindex="-1" role="dialog" aria-labelledby="modal-help-title"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <strong class="modal-title" id="modal-help-title">Confirm</strong> 
     </div><!-- /.modal-header --> 
     <div class="modal-body"> 
     <p id="modal-help-text"></p> 
     </div><!-- /.modal-body --> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-success">Yes</button> 
     <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
     </div><!-- /.modal-footer --> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Answer 1

感謝您的答案和評論每個人。我終於解決了它。至於建議，我使用了一種叫做Bootbox.js and use a customized confirm with alternate button text庫（無需推倒重來，就調整它以滿足需要）

然後我合併的答案：Nuno Reis，Fabien Ménager和Ryan McGeary，創建解決方案。下面是我所做的：

1. 添加類的標識的鏈接，使用這個自定義的確認。在我的代碼中，我使用custom-confirm-link。

2. 將確認消息放入數據綁定data-confirmation。

   所以我的鏈接，現在看起來是這樣的：

   <a href="remove.php?id=3" class="custom-confirm-link" data-confirmation="Are you sure you want to remove this?" /> 
   

3. 在頁腳，我加入click事件偵聽與custom-confirm-link類鏈接。內部：

   • 我檢索觸發鏈接，通過數據的href和確認信息綁定data-confirmation
   • 我做preventDefault()到事件
   • 彈出一個bootbox。JS用自定義標籤確認confirm（是）和cancel（無），
   • 和利用其回調處理結果
   • 只有當確認按鈕是點擊我將通過模擬鏈路的點擊window.location.href。

就是這樣。以下是點擊事件監聽器代碼：

<script type="text/javascript"> 
    // click event listener to links that requires custom confirm 
    $('.custom-confirm-link').click(function(e){ 

     // get link and its confirmation message 
     var link    = $(this); 
     var confirmationmessage = link.data('confirmation'); 
     var address    = link.attr('href'); 

     e.preventDefault(); 

     bootbox.confirm({ 
      title : 'Confirm', 
      message : confirmationmessage, 
      buttons : { 
       confirm : { 
        label : 'Yes', 
        className: 'btn-success' 
       }, 
       cancel : { 
        label : 'No', 
        className : 'btn-danger' 
       } 
      }, 
      callback : function (result) { 
       if (result) 
       { 
        // simulate click the link 
        window.location.href = address; 
       } 
      } 
     }); 
    }); 
</script> 

Answer 2

Click事件本質上是非阻塞和異步的。不像原生confirm。所以你不能返回true或false。你必須以某種方式處理用戶交互的異步性質。

最直接的方式是傳遞一個回調

function custom_confirm(message, callback) { 
    // put message into the body of modal 
    $('#modal-custom-confirmation').on('show.bs.modal', function (event) { 
    // store current modal reference 
    var modal = $(this); 

    // update modal body help text 
    modal.find('.modal-body #modal-help-text').text(message); 
    }); 

    // show modal ringer custom confirmation 
    $('#modal-custom-confirmation').modal('show'); 

    $('#modal-custom-confirmation button.ok').off().on('click', function() { 
    // close window 
    $('#modal-custom-confirmation').modal('hide'); 

    // and callback 
    callback(true); 
    }); 

    $('#modal-custom-confirmation button.cancel').off().on('click', function() { 
    // close window 
    $('#modal-custom-confirmation').modal('hide'); 
    // callback 
    callback(false); 
    }); 
} 

而在HTML

... 
<div class="modal-footer"> 
     <button type="button" class="btn btn-success ok">Yes</button> 
     <button type="button" class="btn btn-default cancel">No</button> 
     </div> 
... 

如果你想實際返回的東西，你可以返回，將解析爲一個承諾或者true或false。但是異步代碼仍然是異步的。