it-swarm.com.de

Jquery zum Öffnen des Bootstrap v3-Modals der Remote-URL

Ich habe eine Seite mit Links zu internen Seiten, die ich in einem modifizierten Bootstrap-DIV öffnen muss. Das Problem ist, dass die Verwendung der neuesten Version von Bootstrap v3 in Verbindung mit jQuery v2.1.4 scheinbar nicht funktioniert, wenn Inhalte auf diese Weise geladen werden. Es gibt viele Tutorials, die ich über das Erstellen von Modalen mit Bootstrap und das Auslaufen von Remote-Inhalten gelesen habe. Aber es muss weg sein, damit dies mit jQuery funktioniert, oder auch nicht.

Die Theorie ist das, wenn Sie klicken

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

der Inhalt von data-load-remote soll mit der Klasse modal-body gelesen und in das div eingefügt werden. 

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

Wenn ich dieses Beispiel jedoch mit jQuery v2.1.4 und BS v3.3 + versuche, öffne ich ein modales Fenster mit grauem Hintergrund, aber das gesamte Styling des modalen Fensters ist verschwunden. Das bedeutet, es scheint nur das Modal-Body-Div anzuzeigen, aber der Modal-Header, der recht modale Frame und die unteren Schaltflächen im Modal-Footer-Div werden überhaupt nicht angezeigt. Die einzige Möglichkeit, die Box zu schließen, besteht darin, außerhalb der modalen Box zu klicken.  partial modal window

Ich habe überall Beispiele gefunden, wie entfernte URLs auf diese Weise geöffnet werden können, aber alle verwenden eine veraltete Version von Bootstrap, nicht die Version, mit der ich arbeite. Kann jemand bitte etwas Licht auf dieses werfen?

22
vanarie

Im Grunde können wir in jquery das Attribut href mit der Funktion load laden. Auf diese Weise können wir die URL im <a>-Tag verwenden und diese im Modal-Body laden. 

<a  href='/site/login' class='ls-modal'>Login</a>

//JS script
$('.ls-modal').on('click', function(e){
  e.preventDefault();
  $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});
37
Kijan Maharjan

Aus Bootstraps Dokumenten über die Option remote;

Diese Option ist seit v3.3.0 veraltet und wurde in v4 entfernt. Wir empfehlen stattdessen das clientseitige Templating oder ein Datenbindungs-Framework oder den Aufruf von jQuery.load.

Wenn eine Remote-URL angegeben wird, wird der Inhalt einmal über die load-Methode von jQuery geladen und in das .modal-content -div eingefügt. Wenn Sie die Daten-API verwenden, können Sie alternativ das href-Attribut verwenden, um die entfernte Quelle anzugeben. Ein Beispiel dafür ist unten gezeigt:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Das ist der .modal-content div, nicht .modal-body. Wenn Sie Inhalt in .modal-body einfügen möchten, müssen Sie dies mit benutzerdefiniertem Javascript tun.

Ich würde also jQuery.load programmgesteuert aufrufen, was bedeutet, dass Sie die Funktionalität der Abbruch- und/oder anderen Tasten je nach Bedarf beibehalten können.

Dazu können Sie ein Datentag mit der URL von der Schaltfläche verwenden, mit der das Modal geöffnet wird, und das Ereignis show.bs.modal verwenden, um Inhalt in das .modal-body div zu laden. 

HTML-Link/Schaltfläche

<a href="#" data-toggle="modal" data-load-url="remote.html" data-target="#myModal">Click me</a>

jQuery

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});
14
worldofjr

e.relatedTarget.data('load-url'); funktioniert nicht
use dataset.loadUrl  

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = e.relatedTarget.dataset.loadUrl;
    $(this).find('.modal-body').load(loadurl);
});
1
Kuzma

Eine andere Perspektive für dasselbe Problem, abgesehen von Javascript und der Verwendung von PHP:

<a data-toggle="modal" href="#myModal">LINK</a>

<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
    <div class="modal-dialog" style="text-align: left;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <?php include( 'remotefile.php'); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

und fügen Sie in die remote.php-Datei Ihre grundlegende HTML-Quelle ein.

1
Dan

Wenn Sie in jQuery die Antwort @worldofjr verwenden, erhalten Sie eine Fehlermeldung:

e.relatedTarget.data ist keine Funktion

du solltest benutzen:

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

Nicht der e.relatedTarget, wenn er von $(..) umschlossen ist

Ich habe den Fehler in der neuesten Version von Bootstrap 3 erhalten und funktioniert nach der Verwendung dieser Methode problemlos.

0

In bootstrap-3.3.7.js sehen Sie den folgenden Code.

if (this.options.remote) {
  this.$element
    .find('.modal-content')
    .load(this.options.remote, $.proxy(function () {
      this.$element.trigger('loaded.bs.modal')
    }, this))
}

Das bootstrap ersetzt den Remote-Inhalt in das <div class="modal-content"> - Element. Dies ist das Standardverhalten des Frameworks. Das Problem liegt also in Ihrem Remote-Inhalt selbst. Es sollte <div class="modal-header">, <div class="modal-body">, <div class="modal-footer"> Von Entwurf.