it-swarm.com.de

Bootstrap modal - blende einen aus und zeige einen anderen

Ich benutze jQueryUI schon lange, aber aus ästhetischen Gründen habe ich kürzlich auf Bootstrap umgestellt. Ich kämpfe jetzt mit einem einfachen Problem und frage mich, ob es etwas ist, mit dem Bootstrap besser vertraut ist.

Ich habe eine generische Funktion zum schnellen Erstellen von Dialogen. Gelegentlich zeige ich einen Dialog ohne Schaltflächen (wenn etwas verarbeitet wird), und tausche ihn dann in einen Dialog mit Schaltflächen aus (Vorgang abgeschlossen - klicken Sie auf OK, um zu klicken Beispiel). Ich versuche nicht, einen bestimmten Prozess hier zu definieren, also sage ich im Grunde, ich möchte in der Lage sein, einen Dialog zu schließen und bei Bedarf einen anderen zu öffnen. Hier setzt das Problem an.

Mit Bootstrap animieren die Dialoge rein und raus und ich mag das und möchte es behalten. Ich möchte es aber nicht tun, wenn ich Dialoge tausche. Ich kann dies tun, indem ich die Klasse fade aus dem ersten Dialog entferne, wenn sie angezeigt wird, und aus dem zweiten Dialog, bevor er angezeigt wird. Das funktioniert großartig. Ich füge die Klasse dann dem zweiten Dialog hinzu, damit sie animiert wird. Die Animation läuft jedoch falsch, wenn ich das mache und es gibt einen hässlichen Blitz, bei dem das Hintergrunddiv leicht ausgeblendet werden sollte.

Ich habe ein jsfiddle zusammengestellt, um das Problem zu demonstrieren. Sie können im ersten Dialogfeld auf die Schaltfläche zum Schließen klicken, um zu sehen, wie die Ausblendanimation sollte aussehen soll.

Jede Hilfe wäre willkommen, bevor ich anfange, nach den Bootstrap-Quelldateien zu suchen.

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

tl; dr

Schauen Sie sich das jsfiddle an - klicken Sie auf "show dialog 2" - klicken Sie auf "ok". Ich möchte den schwarzen Blitz am Ende loswerden.

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();
});
6
Archer

Okay, ich beantworte meine eigene Frage nicht gerne, aber ich habe eine Lösung, die 100% narrensicher ist (soweit ich das beurteilen kann). Ich habe am Ende eine Lösung gesucht, die nach einem vorhandenen Dialog sucht und diesen modifiziert, anstatt ihn zu verstecken und einen neuen anzuzeigen.

Hier ist ein funktionierendes jsfiddle (verwendet echo im Ajax-Aufruf, wo normalerweise eine HTML-Vorlage geladen wird) ...

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

Der Code ist Teil einer größeren Bibliothek, an der ich gerade arbeite, aber ich werde ihn trotzdem hier posten, da er sich für andere als nützlich erweisen kann.

JavaScript-Bibliothek

(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");
            }
        }
    };
})();

Template 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>

Verwendungsbeispiel:

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
        }
    }
});

Weitere Optionen erklärt

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
    }
});

und

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

Alle Optionen in der show()-Methode sind optional, aber Sie möchten offensichtlich einen Titel und einen Textkörper.

3
Archer

AKTUALISIERT:

Ich fügte einen click()-Handler für Ihre letzte Schaltfläche mit einer hinzugefügten Test-ID id="test" hinzu, wobei der Dialog und der Hintergrund mit dem Effekt fadeOut() ausgeblendet werden. Wichtig ist, das Element .modal-backdrop auszublenden, das sowohl den Dialog als auch den Hintergrund enthält:

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

 

JsFiddle

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

}

du willst das

2
esref

Ich habe Code, wie man ein geöffnetes Modal schließt, bevor ein anderes geöffnet wird.

$('[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
    }
});

Hoffe das hat geholfen!

0
Antony GUEDJ