Maison  >  Article  >  interface Web  >  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
Barbara Streisandoriginal
2024-11-07 14:00:04416parcourir

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"));
});

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!

Déclaration:
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