web-dev-qa-db-ja.com

Bootstrap modal-1つを非表示にしてから別の表示

私は長い間jQueryUIを使用してきましたが、最近、美的理由からBootstrapに切り替えました。単純な問題であると予想されるものに苦労していて、それが問題であるかどうか疑問に思っています。他の人がBootstrapに精通していることが私を助けることができます。

その場でダイアログを作成するための汎用関数があり、ボタンのないダイアログを表示して（何かを処理するとき）、ボタンのあるダイアログに交換することがあります（処理が完了しました-[OK]をクリックします。例）。ここではセットプロセスを定義しようとはしていないので、基本的には、必要なときに1つのダイアログを閉じて、別のダイアログを開くことができるようにしたいと言っています。ここで問題が発生します。

Bootstrapで、ダイアログはアニメーション化されます。私はそれが好きで、それを維持したいと思います。しかし、ダイアログを交換するときにそれをしたくありません。クラスを削除することでこれを行うことができますfade表示されるときの最初のダイアログから、および表示される前の2番目のダイアログから、それはうまく機能します。次に、クラスを2番目のダイアログに追加して、アニメーション化するようにします。ただし、アニメーションがうまくいかない場合私はこれを行い、背景のdivが穏やかにフェードアウトするはずの醜いフラッシュがあります。

この問題を示すためにjsfiddleをまとめました。最初のダイアログの閉じるボタンをクリックして、フェードアウトアニメーションがどのように表示されるかを確認できます。

Bootstrapソースファイルを掘り下げる前に、助けていただければ幸いです。

http://jsfiddle.net/ArchersFiddle/0302gLav/1/

tl; dr

Jsfiddleを見てください-「ダイアログ2を表示」をクリックしてください-「OK」をクリックしてください。最後に黒い閃光を消したい。

[〜＃〜] css [〜＃〜]

@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
.modal {
    display: none;
}

[〜＃〜] html [〜＃〜]

<div id="dialog1" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Dialog 1</h4>
      </div>
      <div class="modal-body">This is the first modal dialog</div>
      <div class="modal-footer">
        <button type="button" id="dialog-ok" class="btn btn-default">Show dialog 2</button>          
        <button type="button" id="dialog-close" class="btn btn-default" data-dismiss="modal">Close</button>          
      </div>
    </div>
  </div>
</div>

<div id="dialog2" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Dialog 2</h4>
      </div>
      <div class="modal-body">This is the second modal dialog</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>          
      </div>
    </div>
  </div>
</div>

JavaScript

function showDialog2() {
    $("#dialog1").removeClass("fade").modal("hide");
    $("#dialog2").modal("show").addClass("fade");
}

$("#dialog1").modal("show");

$("#dialog-ok").on("click", function() {
    showDialog2();
});
javascriptjquerycsstwitter-bootstrapmodal-dialog
6
Archer

さて、私は自分の質問に答えるのは好きではありませんが、100％絶対確実な解決策を持っています（私が知る限り）。私は、既存のダイアログを非表示にして新しいダイアログを表示するのではなく、既存のダイアログをチェックして変更するソリューションを選択することになりました。

これが機能するjsfiddleです（通常はhtmlテンプレートをロードするajax呼び出しでechoを使用します）...

http://jsfiddle.net/ArchersFiddle/0302gLav/9/

このコードは私が取り組んでいるより大きなライブラリの一部ですが、他の人にも役立つかもしれないので、とにかくここに投稿します。

JavaScriptライブラリ

_(function () {

    var _defaultOptions = {
        backdrop: "static",
        close: true,
        keyboard: true
    };

    window.bootstrap = {
        modal: {
            show: function (options) {

                options = $.extend(_defaultOptions, options);

                var buttonText = "";

                for (var key in options.buttons) {

                    options.buttons[key].id = "button_" + key.split(" ").join("");

                    var button = options.buttons[key];

                    buttonText += "<button type=\"button\" " +
                        "id=\"" + button.id + "\" " +
                        "class=\"btn " +
                        (typeof (button.class) == "undefined" ? "btn-default" : button.class) + "\" " +
                        (typeof (button.dismiss) == "undefined" ? "" : "data-dismiss=\"modal\" ") + ">" +
                        key + "</button>";
                }

                $.ajax({
                    url: "templates/bootstrap-modal.html"
                })
                .done(function (data) {
                    data = data
                        .replace("{:Title}", options.title)
                        .replace("{:Body}", options.body)
                        .replace("{:Buttons}", buttonText);

                    var $modal = $("#bootstrap-modal");
                    var existing = $modal.length;

                    if (existing) {
                        $modal.html($(data).find(".modal-dialog"));
                    }
                    else {
                        $modal = $(data).appendTo("body");
                    }

                    for (var key in options.buttons) {
                        var button = options.buttons[key];
                        if (typeof (button.callback) !== undefined) {
                            $("#" + button.id).on("click", button.callback);
                        }
                    }

                    $modal.off("shown.bs.modal").on("shown.bs.modal", function(e) {
                        if (typeof(options.onshow) === "function") {
                            options.onshow(e);
                        }
                    });

                    if (!existing) {
                        $modal.modal(options);
                    }

                    if (options.large === true) {
                        $modal.find(".modal-dialog").addClass("modal-lg");
                    }

                    if (options.close === false) {
                        $modal.find("button.close").remove();
                    }
                });
            },
            hide: function (callback) {
                var $modal = $("#bootstrap-modal");

                if (!$modal.length) return;

                $modal.on("hidden.bs.modal", function(e) {
                    $modal.remove();
                    if (typeof(callback) === "function") {
                        callback(e);
                    }
                });

                $modal.modal("hide");
            }
        }
    };
})();
_

テンプレートHTML

_<div id="bootstrap-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">{:Title}</h4>
      </div>
      <div class="modal-body">{:Body}</div>
      <div class="modal-footer">
        {:Buttons}
      </div>
    </div>
  </div>
</div>
_

使用例：

_bootstrap.modal.show({
    title: "Dialog Title",
    body: "<p>This is the dialog body and can contain any old html rubbish.</p>",
    buttons: {
        Close: {
            dismiss: true
        }
    }
});
_

その他のオプションの説明

_bootstrap.modal.show({
    backdrop: true,                     // show the backdrop
    close: true,                        // show the close button
    keyboard: true,                     // allow the keyboard to close the dialog
    title: "Dialog Title",
    body: "<p>This is the dialog body and can contain any old html rubbish.</p>",
    buttons: {
        Button1: {
            class: "btn-primary",           // any class you want to add to the button
            dismiss: false,                 // does this button close the dialog?
            callback: function() {          // button click handler
                // the button was clicked - do something here
            }
        },
        Button2: {
            // options as defined as above.  You can have as many buttons as you want
        }
    },
    onshow: function(e) {
        // this will trigger when the dialog has completed the show animation
    }
});
_

そして

_bootstrap.modal.hide(function(e) {
    // this will trigger when the dialog has completed the hide animation
});
_

show()メソッドのすべてのオプションはオプションですが、明らかにタイトルと本文が必要になります。

3
Archer

[〜＃〜]更新[〜＃〜]：

最後のボタンにclick()ハンドラーを追加し、テスト識別子_id="test"_を追加しました。ここで、ダイアログと背景は fadeOut() でフェードアウトします。効果。重要なことは、ダイアログと背景の両方をカプセル化する要素_.modal-backdrop_をフェードアウトすることです。

_$("#test").on("click", function () {
    $(".modal-backdrop").fadeOut("slow");
});
_

JsFiddle

4
urbz
function showDialog2() {
$("#dialog1").removeClass("fade").modal("hide");
$("#dialog2").addClass("fade").modal("show");

}

あなたがなりたい this

2
esref

別のモーダルを開く前に、開いているモーダルを閉じる方法をコーディングしました。

$('[data-toggle="modal"]').on('click', function() { //On click a button which call a modal
    if(($(".modal").data('bs.modal') || {}).isShown){ //If a modal is shown
        var modal = $(".modal.in"); // Get the current element
        $(modal).modal('hide'); // Hide the current modal
    }
});

お役に立てば幸いです。

0
Antony GUEDJ