Maison > interface Web > tutoriel CSS > Comment puis-je charger du contenu distant dans Bootstrap 4 Modal ?

Comment puis-je charger du contenu distant dans Bootstrap 4 Modal ?

Patricia Arquette
Libérer: 2024-11-09 21:04:02
original
862 Les gens l'ont consulté

How Can I Load Remote Content in Bootstrap 4 Modal?

Chargement de contenu à distance dans Bootstrap 4 Modal

L'avènement de Bootstrap 4 apporte un changement significatif à la fonctionnalité de chargement de données à distance dans Modal. Contrairement à Bootstrap 3, Bootstrap 4 déconseille l'option distante, citant la recommandation d'utiliser des modèles côté client ou des cadres de liaison de données.

Problème détecté avec Bootstrap 4 Modal :

Les utilisateurs ont signalé avoir rencontré des problèmes lors du chargement de contenu distant dans Modal à l'aide de la nouvelle version alpha de Bootstrap 4. Pendant que la fenêtre contextuelle apparaît, le corps du modèle reste vide, indiquant que la demande de chargement du contenu à partir de l'URL fournie n'est pas effectuée.

Solution utilisant jQuery :

Pour restaurer la fonctionnalité de chargement à distance, vous pouvez l'implémenter manuellement à l'aide de jQuery :

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

Explication

Cette solution utilise la méthode load() de jQuery pour charger dynamiquement le contenu de l'URL distante spécifiée vers l'élément .modal-body du modal ciblé. L'écouteur d'événement click est lié à tous les éléments avec l'attribut data-toggle="modal", garantissant que la fonctionnalité est appliquée à tous les modaux de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal