Maison > interface Web > js tutoriel > Comment puis-je transmettre des données à un modal Bootstrap à l'aide de jQuery ?

Comment puis-je transmettre des données à un modal Bootstrap à l'aide de jQuery ?

DDD
Libérer: 2024-12-15 02:50:09
original
405 Les gens l'ont consulté

How Can I Pass Data to a Bootstrap Modal Using jQuery?

Transmission de données à un modal Bootstrap

Lors de la création de pages Web interactives, la transmission de données entre les composants peut améliorer l'expérience utilisateur et rationaliser les fonctionnalités. Dans le contexte des modaux Bootstrap, le transfert de données entre le lien hypertexte de déclenchement et le modal lui-même peut fournir des informations ou un contexte supplémentaires à l'utilisateur.

Une approche pour transmettre dynamiquement des données à un modal Bootstrap consiste à utiliser l'événement .on de jQuery. gestionnaire. Cette méthode offre une flexibilité dans la capture des clics potentiels sur des éléments avec une classe spécifique, telle que "open-AddBookDialog".

$(document).on("click", ".open-AddBookDialog", function() {
Copier après la connexion

Lorsque l'on clique sur un élément avec la classe "open-AddBookDialog", le gestionnaire d'événements s'exécute . Au sein de cette fonction, les données associées à l'élément cliqué peuvent être obtenues à l'aide de la méthode .data().

var myBookId = $(this).data('id');
Copier après la connexion

Cet extrait récupère l'identifiant unique attaché au lien hypertexte cliqué et le stocke dans la variable myBookId.

Ensuite, l'élément d'entrée du corps modal avec l'ID "bookId" peut être ciblé à l'aide du sélecteur de jQuery. Ce champ de saisie est l'endroit où l'ID transmis sera inséré.

$(".modal-body #bookId")
Copier après la connexion

Définir la valeur de cet élément d'entrée sur myBookId transfère efficacement l'ID du lien hypertexte vers le modal.

$(".modal-body #bookId").val( myBookId );
Copier après la connexion

En remplissant dynamiquement le champ de saisie dans le modal, des informations précieuses sont transmises à partir du lien hypertexte, permettant des fonctionnalités modales personnalisées, telles que des recherches dans des bases de données ou un contenu personnalisé. display.

Enfin, il convient de noter qu'il n'est pas nécessaire d'appeler manuellement la fonction modal('show') pour afficher le modal. Bootstrap affiche automatiquement le modal une fois le transfert de données terminé.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal