Maison > interface Web > js tutoriel > Comment transmettre des données à un modal Bootstrap en cliquant sur un lien hypertexte ?

Comment transmettre des données à un modal Bootstrap en cliquant sur un lien hypertexte ?

Susan Sarandon
Libérer: 2024-12-26 02:55:13
original
330 Les gens l'ont consulté

How to Pass Data to a Bootstrap Modal When Clicking a Hyperlink?

Transmission de données à un modal Bootstrap

La tâche à accomplir consiste à ouvrir un modal Bootstrap en cliquant sur un lien hypertexte et en transmettant un identifiant associé au modal. Malgré les tentatives, les utilisateurs rencontrent un problème où le modal reste inactif ou ne dispose pas des données nécessaires.

Solution

Tirer parti du gestionnaire d'événements .on du framework jQuery s'avère être une solution efficace méthode. Considérez l'approche suivante :

HTML

<a data-toggle="modal" data-id="ISBN564541" title="Add this item">
Copier après la connexion

JavaScript

$(document).on("click", ".open-AddBookDialog", function () {
    var myBookId = $(this).data('id'); // Retrieve the ISBN from the clicked link
    $(".modal-body #bookId").val(myBookId); // Set the input field's value in the modal
    // It is unnecessary to manually call the modal as Bootstrap handles it with data-toggle="modal"

});
Copier après la connexion

Avec cette approche, en cliquant sur le lien hypertexte ouvrira à la fois le modal et remplira le champ de saisie avec l'ID récupéré à partir du lien. Cette solution résout efficacement le problème de la transmission de données au modal Bootstrap en cliquant sur un lien hypertexte.

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