Heim >Web-Frontend >CSS-Tutorial >Wie lade ich Remote-Daten in Bootstrap 4-Modale?

Wie lade ich Remote-Daten in Bootstrap 4-Modale?

Barbara Streisand
Barbara StreisandOriginal
2024-12-01 08:35:11810Durchsuche

How to Load Remote Data into Bootstrap 4 Modals?

Bootstrap 4 Modal Remote Data Loading

In der neuesten Version von Twitter Bootstrap (v4 Alpha) besteht die Möglichkeit, Remote-Inhalte in a zu laden Modal wurde entfernt. Diese Funktionalität existierte in Bootstrap 3, wird aber nicht mehr unterstützt.

Problem

Beim Versuch, das data-remote-Attribut zu verwenden, um Remote-Inhalte in ein Modal in Bootstrap zu laden 4, der Modellkörper bleibt leer und es wird keine Anfrage an die angegebene Adresse gesendet URL.

Lösung

Um dieses Problem zu beheben, können Sie JavaScript verwenden, um den Remote-Inhalt manuell in den Modalkörper zu laden. Hier ist ein Beispiel:

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });  

Dieser Code fügt einen Ereignis-Listener an alle Elemente mit dem Attribut data-toggle="modal" an. Wenn auf eines dieser Elemente geklickt wird, ruft es den datenfernen Wert vom Element ab und verwendet die .load()-Methode von jQuery, um den entfernten Inhalt in den modalen Körper zu laden.

Hinweis: Die veraltete Remote-Option wurde in Bootstrap 4 entfernt und es wird empfohlen, sie wie gezeigt mithilfe von clientseitigen Vorlagen, Datenbindungs-Frameworks oder durch manuellen Aufruf von jQuery.load() zu implementieren oben.

Das obige ist der detaillierte Inhalt vonWie lade ich Remote-Daten in Bootstrap 4-Modale?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn