web-dev-qa-db-ja.com

カスタムダイアログを使用するときにブートボックスを閉じる方法

ダイアログを表示するために bootbox を使用しています。

bootbox.confirm、bootbox.alert、またはbootbox.Promptを使用している場合、escapeキーを押すか、ダイアログの外側をクリックすると、ダイアログは期待どおりに閉じました。

しかし、bootbox.dialogを使用しているときに、ダイアログの外側をクリックするか、escapeキーを押すと、ダイアログが閉じません。他のダイアログのように動作させるにはどうすればよいですか？

var box = bootbox.dialog({
    show: false,
    backdrop: true,
    animate: false,
    title: 'Bla',
    message: 'bla bla bla',
    buttons: {
        cancel: {
            label: 'Cancel',
            className: 'btn-warning'
        },
        save: {
            label: 'Parse',
            className: 'btn-success',
            callback: function () {
                // handling with ajax
                return false;
            }
        }
    }
});
box.modal('show');
javascripttwitter-bootstrap-3modal-dialogbootbox
18
Kokizzu

これでうまくいくはずです。これはv3でのみテストされていることに注意してください。 bootstrap 2.3.2を使用

$(document).on('click', '.modal-backdrop', function (event) {
    bootbox.hideAll()
});
32
tibc-dev

onEscapeコールバック関数を追加します。これには、空のボディが含まれる場合があります。

ドキュメントと例 を参照してください。

基本コード：

bootbox.dialog({
   onEscape: function() {},
   // ...
});
16
bart

正直に言うと、私はモーダルを実際に使用したことはありません-ずっと前にPRから来ましたが、そのユースケースを確信したことはありませんでした。あなたには今は良いことではありませんが、このメソッドはv3.0.0で非推奨として実際にコメントされており、おそらく将来のバージョンでは実際に削除されるでしょう-Bootboxが作成されたものや他のメソッドが微調整、改善、およびテストが行​​われ、多少無視されました。

しかし、あなたはこのようなことをすることができます

$(document).keyup(function(e) {
  if (e.keyCode == 27) {box.modal("hide");}   // esc
});
2
Miomir Dancevic

ここで他の答えを試しましたが、うまくいきませんでした。私が使用していた特定のバージョンのブートボックスまたは他の何らかの理由に関係しているかどうかはわかりませんが、私は自分のソリューションを次のようにロールバックしました：

  • 開かれた最後のモーダルのみを閉じます（つまり、ネストされたモーダルの場合、すべてを閉じないでください）
  • 外部クリックで閉じるモーダルと閉じないモーダルを選択して選択する
  • すべてのモーダルフレーバー（ダイアログ、アラート、確認など）で作業する
  • ライブラリまたはライブラリのバージョンを変更する必要はありません

以下を実行します。

function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
  d[0].addEventListener('click', function(e) {
    if(e.target == d[0])
      $(d).modal('hide');
    e.stopImmediatePropagation();
    return false;
  });
}

次のように使用されます：

var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);
1
mwag

バージョン3のダイアログでは、背景がtrueになるのはonEscapeがtrueの場合のみです。したがって、両方をtrueに設定する必要があります。

bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
1
AndyS