it-swarm.com.de

Bootbox Dialog Modal Bootstrap 4

Auf meiner Seite habe ich eine Tabelle. In einer der Zellen dieser Tabelle befindet sich ein Link. Ich führe jQuery-Skripts aus, wenn auf diesen Link geklickt wird. Wenn zum Beispiel auf den Link geklickt wird, möchte ich einen Bootstrap-Dialog anzeigen. Dies kann leicht mit Bootbox.js durchgeführt werden. Die Bootbox wird jedoch nicht mit Unterstützung von Bootstrap 4 aktualisiert.

Ursprünglich würde die Bootbox nicht einmal angezeigt werden, da in Bootstrap 3 der Klassenname in angezeigt wurde, in Bootstrap 4 jedoch show. Ich habe das behoben, aber so sieht es aktuell aus.

 enter image description here

Der HTML-Code, der durch den Aufruf von bootbox.js generiert wird, lautet:

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Test Title?</h4>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

Das Problem ist, dass in der div, wo die Klasse modal-header ist, die Schaltfläche vor dem h4-Element steht. Wenn diese gewechselt würden, wäre dieses Problem gelöst, aber damit brauche ich Hilfe. Wie mache ich das über die Bootbox-Syntax? Ich weiß, ich könnte den Titel erst jetzt entfernen, bis die Bootbox aktualisiert wird, um Bootstrap 4 zu unterstützen, aber ich bin gespannt, ob dies möglich ist.

Folgendes habe ich bisher:

                bootbox.confirm({
                    className: "show", // where I had to manually add the class name
                    title: "Test Title?",
                    message: "Test Message",
                    buttons: {
                        cancel: {
                            label: "<i class='fa fa-times'></i> Cancel"
                        },
                        confirm: {
                            label: "<i class='fa fa-check'></i> Confirm"
                        }
                    },
                    callback: function (result) {
                        // my callback function
                    }
                });
12
M12 Bennett

Um dies zu beheben, vertauschen Sie einfach die Positionen (im HTML) der Überschrift und des x wie folgt:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Test Title?</h4>
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

Bei der Suche nach closeButton hier: https://raw.githubusercontent.com/makeusabrew/bootbox/master/bootbox.js die Dinge tun mir ein bisschen schwer.

Wenn Sie sich jedoch ändern

dialog.find(".modal-header").prepend(closeButton);

zu:

dialog.find(".modal-header").append(closeButton);

in dieser Datei sollte das Problem behoben sein.

BEARBEITEN:

Eigentlich gibt es auch dialog.find(".modal-title").html(options.title);

Sie müssen also das closeButton an den Titel anhängen . Dann wird es wie erwartet funktionieren.

1
WebDevBooster

Sie können es einfach per css auflösen:

.bootbox .modal-header{
display: block;
}
21
Paweł Rymsza

es kann behoben werden mit:

.bootbox .modal-header {
    flex-direction: row-reverse;
}
3
auri.borealis

Wenn Leute darauf stoßen, gibt es jetzt eine Version von Bootbox 5, die Bootstrap 4 unterstützt. Sie finden sie hier https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta

1
Al Belmondo

Vielleicht können Sie den Dom in der Bootbox-Callback-Funktion neu ordnen, beispielsweise:

bootbox.confirm({
    ...
    callback: function () {
       $('.modal-header').prepend('.modal-title');                 
    }
});
0
Eliellel

folgendes habe ich getan und es hat funktioniert: Gehen Sie zu Ihrer js-Datei (meine ist bootbox.min.js), finden Sie diese Zeile:

var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)

und ändern Sie es für:

var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)

Sie müssen es nur für "Anfügen" ändern und der Closebutton sollte normalerweise auf der rechten Seite sein. 

0
Youssef Harkati