$_GET 変数をリンクからブートストラップ モーダルに渡すにはどうすればよいですか?

リンクからブートストラップ モーダルへの $_GET 変数の受け渡し

Web 開発では、多くの場合、リンクからモーダル ウィンドウにデータを渡すことが必要になります。ブートストラップで $_GET 変数を使用してこれを実現するには、次の手順に従います。

簡単な解決策

1. モーダル呼び出しボタン:

   <td>

2. モーダルHTML:
   次のモーダル HTML を、呼び出しボタンがあるページの while ループの外側に配置します (できれば下):

   <div class="modal fade">

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>

による代替ソリューションAjax

1. モーダル呼び出しボタン (データ属性付き):

   <td>

2. モーダルHTML:

   <div class="modal fade">

3. JavaScript ( 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
         }
       });
     });
   });

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
   }
   ?>

補足事項

• データをクリアするための別のスクリプトの必要性を排除するにはモーダルには $('#editBox').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); });
別のオプションは、$('.open-modal').click(function(){ ... }); で jQuery のクリック関数を使用することです。ここで、open-modal はモーダル呼び出しに追加されるカスタム クラスです。
• データ属性を使用してページ上の情報をモーダルに渡し、ブートストラップ モーダル イベントを使用して処理することもできます。

これらの手法を使用すると、効果的に $ を渡すことができます。 _ブートストラップ モーダルへのリンクから変数を取得し、Web アプリケーションで動的コンテンツを表示できるようにします。

以上が$_GET 変数をリンクからブートストラップ モーダルに渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。