web-dev-qa-db-ja.com

Javascriptモーダルからの「戻り値」を待つ

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

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

質問：

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

つまり：

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

これはモーダル用の私のHTMLコードです（ボタンは-どういうわけか-onclick javascriptルーチンを介して動作する必要がありますか？）-_#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)のような関数を書く
  • _#confirmMessage_をメッセージに設定し、Yes'hrefを_javascript:functionToExec_に設定します
  • 意味がありますか？

少し紛らわしいように聞こえるかもしれませんが、これを行うための最もjavascriptに適した方法が何であるかはわかりません...

javascriptjqueryhtmltwitter-bootstrapmodal-dialog
13
Dr.Kameleon

基本的にこれを行う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ではなくhidden.bs.modalイベントにハンドラーを追加する必要があることに注意してください。

13
moribvndvs

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

$('.btn').click(function(){
   val=$(this).val()
   if(val=='Yes'){
     //continue the processing
   }
})
1
Nick