17

OK、私は決して JavaScript の第一人者ではなく、おそらくデスクトップ ソフトウェア開発の観点からまだ考えていますが、これが私が達成しようとしていることです。

  • Twitter Bootstrapのモーダルを使用しています
  • 場合によっては、アクションを実行する前に、「よろしいですか?」と確認したいことがあります。(はい/いいえ) モーダル ダイアログ。

質問 ：

  • 内部ロジックはどうあるべきですか？

つまり ：

  • ユーザーが buttonA をクリックする (最終的に actionA を実行する)
  • モーダルを起動し、入力 (2 つのボタンのいずれか - はい/いいえ) を待ち、および/または actionA を実行する (またはしない) 前にチェックルーチンに渡したい

これは、モーダルの HTML コードです (ボタンは、何らかの方法で、 onclickJavaScript ルーチンを介して動作する必要がありますか?) -#confirmMessage変数になることにも注意してください。

<div class="modal fade hide" id="confirmAlert">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3 id="confirmTitle">Are you sure?</h3>
    </div>

    <div class="modal-body">
        <p id="confirmMessage">Body</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <a href="#" class="btn btn-danger">Yes</a>
    </div>
</div>

ただのアイデア：

  • のような関数を書くcheckBeforeExec(message,functionToExec)
  • message に設定#confirmMessageし、Yes の href にjavascript:functionToExec
  • 理にかなっていますか？

少し混乱するかもしれませんが、これを行うための最もjavascriptに適した方法が何であるかはわかりません...

4

2 に答える 2

15

confirm基本的にこれを行うヘルパー関数を使用して、モーダルの周りにダイアログマネージャーを作成しました。

var callback = function(result) {
  alert(result);
}); // define your callback somewhere

$('#confirmAlert').on('click', '.btn, .close', function() {
  $(this).addClass('modal-result'); // mark which button was clicked
}).on('hidden', function() {
  var result = $(this).find('.modal-result').filter('.btn-danger').length > 0; // attempt to filter by what you consider the "YES" button; if it was clicked, result should be true.

  callback(result); // invoke the callback with result
});

また、キャンセルボタンとはいボタンの両方を作成する必要がありますdata-dismiss="modal"。

これは、私のダイアログマネージャーの簡単な例を含むフィドルです。

Bootstrap 3を使用している場合は、 のhidden.bs.modal代わりにイベントにハンドラーを追加する必要があることに注意してくださいhidden。

于 2012-08-13T10:03:05.693 に答える
1

jqueryを使用すると、次のようなものを使用できます

$('.btn').click(function(){
   val=$(this).val()
   if(val=='Yes'){
     //continue the processing
   }
})
于 2012-08-13T10:06:36.287 に答える