web-dev-qa-db-ja.com

ブートボックス：ダイアログを閉じた後のコールバック関数/「X」ボタンをクリック

次のスニペットを使用すると、クリックされたボタンのコールバック関数で何かを実行できます。ただし、コールバック関数、またはユーザーが「X」ボタンをクリックしたとき/ダイアログを閉じたときにコードを実行できるような同様の回避策を取得するにはどうすればよいですか？

    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess:{
                label: "Ok",
                callback: callback
            }
        }       
    });

   callback(){//stuff that happens when they click Ok.}

閉じるボタンを無効化/非表示にしたくない

closeButton: false,
javascripttwitter-bootstrapcallbackbootbox
10
Null Reference

このためのonEscape関数があります。

bootbox.dialog({
    message: 'the msg',
    title: "Title",
    onEscape: function() {
        // you can do anything here you want when the user dismisses dialog
    }
});
13
Haris ur Rehman

変数を使用して、OKまたはx button / escape keyをクリックした後にモーダルが非表示になっているかどうかを確認できます

var status = false;

$('.btn').on('click', function () {
    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess: {
                label: "Ok",
                callback: function () {
                    status = true;
                }
            }
        },
        onEscape: function () {
            $('.bootbox.modal').modal('hide');
        }
    });
});

$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
    callback();
});


function callback() {
    if (!status) {
        onClose();
    } else {
        onOK();
        status = false;
    }
}

function onClose() {
    $('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}

function onOK() {
    $('p.alert span').removeClass().addClass('text-success').text("Sucess");
}

フィドルデモ

6
anpsmn

一部の人々はこれを少しハックアラウンドのように見るかもしれません。私が望んでいたようにそれは私にうまく合っていますが、誰かがメッセージを受け入れたことを開発者として acknowledge 次のイベントをトリガーしました。

Bootbox.jsのネイティブconfirm()メソッドを使用して実行callbackアクションを提供します。 confirmクラス名を使用して、hiddenボタンにオプションとして追加のクラスを追加しました（はconfirm()呼び出しで指定する必要があります）（たとえば、Bootstapには、呼び出されたdisplay:noneのヘルパークラスhidden。

これにより確認ボタンが非表示になるため、モーダルは通常のアラートボックスとして表示されます。

    bootbox.confirm({ 
        message: "Some Button Text", 
        buttons: {
            "cancel": {
                label: "<i class='fa fa-check'></i> OK - I understand",
                className: "btn btn-primary"
            },
            //Hide the required confirm button.
            "confirm": { label: "", className: "hidden" }
        },
        callback: function(){
            //Begin Callback
            alert( "Finished" );
        }
    });

JsFiddleの例

1
MackieeE