Comment puis-je transmettre des variables $_GET d'un lien vers un modal Bootstrap ?

Passer des variables $_GET d'un lien à un modal Bootstrap

Dans le développement Web, il est souvent nécessaire de transmettre des données d'un lien à une fenêtre modale. Pour y parvenir en utilisant les variables $_GET dans Bootstrap, suivez ces étapes :

Solution simple

1. Bouton d'appel modal :

   <td>

   Copier après la connexion

   Copier après la connexion

2. HTML modal :
   Placez le HTML modal suivant en dehors de la boucle while sur la page où se trouve le bouton d'appel (de préférence en bas) :

   <div class="modal fade">

   Copier après la connexion

   Copier après la connexion

3. file.php:

   <?php
   // Include database connection here
   
   $Id = $_GET["id"]; // Escape the string if you like
   
   // Run the query
   ?>
   
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title"><center>Heading</center></h4>
   </div>
   
   <div class="modal-body">
     // Show records fetched from database against $Id
   </div>
   
   <div class="modal-footer">
     <button type="button" class="btn btn-default">Submit</button>
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>

   Copier après la connexion

Solution alternative avec Ajax

1. Bouton d'appel modal (avec attribut de données) :

   <td>

   Copier après la connexion

   Copier après la connexion

2. HTML modal :

   <div class="modal fade">

   Copier après la connexion

   Copier après la connexion

3. JavaScript (avec jQuery) :

   // jQuery library comes first
   // Bootstrap library
   $(document).ready(function() {
     $('#editBox').on('show.bs.modal', function(e) {
       var id = $(e.relatedTarget).data('id'); // Fetch id from modal trigger button
   
       $.ajax({
         type: 'post',
         url: 'file.php', // Here you will fetch records
         data: 'post_id=' + id, // Pass $id
         success: function(data) {
           $('.form-data').html(data); // Show fetched data from database
         }
       });
     });
   });

   Copier après la connexion

4. file.php :

   <?php
   // Include database connection here
   
   if ($_POST['id']) {
     $id = $_POST['id'];
   
     // Run the query
     // Fetch records
     // Echo the data you want to show in the modal
   }
   ?>

   Copier après la connexion

Notes supplémentaires

• Pour éliminer le besoin d'un script distinct pour effacer les données du modal, vous pouvez utiliser $('#editBox').on('hidden. bs.modal', function () { $(this).removeData('bs.modal'); });
• Une autre option consiste à utiliser la fonction de clic de jQuery avec $('.open-modal') .click(function(){ ... });, où open-modal est une classe personnalisée ajoutée au bouton d'appel modal.
• Vous pouvez également transmettre des informations sur la page au modal à l'aide des attributs de données et gérez-le à l'aide de l'événement modal bootstrap.

En utilisant ces techniques, vous pouvez transmettre efficacement les variables $_GET d'un lien vers un modal Bootstrap, vous permettant d'afficher du contenu dynamique dans vos applications Web.

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!