Comment transmettre des données depuis des hyperliens vers un modal Bootstrap ?

Transmission de données à un modal Bootstrap

Les fenêtres modales sont un élément courant dans les interfaces utilisateur, permettant aux utilisateurs d'interagir avec un contenu spécifique sans quitter le page actuelle. Cet article traite d'une solution au problème de la transmission de données à un modal lors de son ouverture.

Problème :

Les développeurs Web rencontrent souvent le besoin de transmettre des données à partir d'un lien hypertexte à une fenêtre modale. Par exemple, considérons une interface utilisateur avec des hyperliens auxquels sont attachés des ID uniques. Lorsqu'ils sont cliqués, ces liens doivent ouvrir une fenêtre modale et transmettre les identifiants au modal. Cependant, de nombreux développeurs rencontrent des difficultés pour implémenter cette fonctionnalité.

Solution :

Une solution efficace à ce problème consiste à utiliser l'événement .on de jQuery. gestionnaire. Voici une explication étape par étape de la façon de transmettre des données :

1. Marquage HTML : définissez des hyperliens avec des attributs de données contenant des identifiants uniques. Incluez un champ de saisie masqué dans le modal pour capturer les données transmises :

<a data-toggle="modal" data-id="ISBN564541" class="open-AddBookDialog">Link 1</a>

<div class="modal hide">
<ol start="2"><li>
<strong>JavaScript</strong> : liez l'événement de clic aux hyperliens et extrayez les valeurs des attributs de données . Mettez à jour l'entrée masquée dans le modal en conséquence :</li></ol>
<pre class="brush:php;toolbar:false">$(document).on("click", ".open-AddBookDialog", function () {
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});

3. Facultatif : Si vous le souhaitez, affichez le modal en appelant manuellement la fonction modal('show') :

$('#addBookDialog').modal('show');

Supplémentaire Notes :

• La solution fournie utilise la gestion déléguée des événements, qui est plus efficace que la liaison d'événements à des éléments individuels.
• Il n'est pas nécessaire d'appeler manuellement le modal('show '), car l'événement de clic sur l'élément à bascule modal affichera automatiquement le modal.

En suivant ces étapes, les développeurs peuvent transmettre efficacement les données de des hyperliens vers des fenêtres modales, améliorant l'expérience utilisateur et simplifiant les flux de travail de développement.