Bootstrap Modal - Yesボタンをクリックした場合Trueを返す方法

Question

さて、私は一日中Q & Aを読んだが、やり遂げられなかった。

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

と私：代わりに、デフォルトのダイアログのユーザーがはいをクリックした場合、私はtrueを返すために、ブートストラップモーダルを使用し、第

例えばfalseを返す式I）は、カスタマイズされた確認を（作成するために必要なカスタムconfirm関数は次のとおりです。

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

回答ありがとうございます。私はついにそれを解決しました。ソリューションを作成するために、Nuno Reis、Fabien Ménager、およびRyan McGeary：示唆したように、私は（ちょうど必要性に合うように微調整し、車輪の再発明する必要）Bootbox.js and use a customized confirm with alternate button text呼ばない

をライブラリを使用それから私はの答えを組み込みます。ここに私がやったことだ：

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. 、私はクラスcustom-confirm-linkとのリンクにイベントリスナーをクリックしてください追加。インサイド：

   • I がトリガリンクを取得し、データを通じてそのhrefとその確認メッセージが、私は
   • がbootboxポップイベントにpreventDefault()をしたdata-confirmation
   • をバインドします。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を返すことはできません。ユーザーのやりとりの非同期性をどうにかして処理しなければなりません。

あなたが実際にあなたがtrueのいずれかに解決でしょう約束を返す可能性が何かを返したい場合は、コールバック

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> 
... 

を渡すことであろう最も単純な方法またはfalse。しかし、まだ非同期コードは非同期のままです。