Maison > interface Web > tutoriel CSS > Comment implémenter des modaux distants dans Bootstrap 4 après la suppression de l'option « remote » ?

Comment implémenter des modaux distants dans Bootstrap 4 après la suppression de l'option « remote » ?

Barbara Streisand
Libérer: 2024-11-07 14:00:04
original
533 Les gens l'ont consulté

How to Implement Remote Modals in Bootstrap 4 After the Removal of the `remote` Option?

Problème modal à distance de Bootstrap 4 résolu avec jQuery

Les développeurs de Bootstrap ont récemment annoncé la suppression de l'option distante de Bootstrap 4, laissant les utilisateurs avoir du mal à implémentez des Modals distants avec le framework mis à jour.

Cette question met en évidence la frustration rencontrée lorsque vous essayez d'utiliser l'option distante pour charger du contenu dans un Modal. L'utilisateur a observé que la fenêtre contextuelle est apparue mais que le corps modal est resté vide, indiquant un manque d'appel à distance.

La solution proposée dans la réponse consiste à exploiter jQuery pour remplacer l'option distante obsolète. En écrivant du code personnalisé, les utilisateurs peuvent charger dynamiquement du contenu dans le corps modal lorsqu'un attribut data-remote est rencontré.

Implémentation de jQuery :

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

Ajout de ce code garantit que lorsqu'un bouton avec un attribut data-toggle="modal" et un attribut data-remote est cliqué, le corps modal chargera le contenu spécifié par l'attribut data-remote.

Cette solution fournit une solution de contournement pour la suppression de l'option distante dans Bootstrap 4, permettant aux utilisateurs de continuer à utiliser les modaux distants. Cependant, il est important de noter que cette implémentation nécessite du code supplémentaire et peut introduire des problèmes potentiels liés à la sécurité du navigateur et aux dépendances JavaScript.

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!

source:php.cn
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