Как передать переменные $ _GET из ссылки в bootstrapmodal?

Простое решение для передачи id , выборки записей из базы данных по переданному id и показ в модальном;

Простое решение

Кнопка Modal Call

 <td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td> 

Модальный HTML

Поместите следующий модальный HTML вне while loop на странице, где расположена указанная выше кнопка вызова (предпочтительнее внизу страницы)

 <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> //Content Will show Here </div> </div> </div> 

Теперь создайте файл PHP и назовите его file.php

Этот файл вызывается с помощью модальной кнопки вызова href="file.php?id=<?php echo $obj->id;?>"

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

Чтобы удалить данные внутри модальных или других слов для обновления модальности при открытии следующих записей без обновления страницы, используйте следующий скрипт

Поместите его после jQuery и библиотеки Bootstrap (помните, что библиотеки jQuery и Bootstrap всегда на первом месте)

 <script> $( document ).ready(function() { $('#editBox').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); }); }); </script> 

Альтернативное решение с Ajax и Bootstrap Modal Event Listener

В режиме модального вызова замените href="file.php?id=<?php echo $obj->id;?> С атрибутом data-id="<?php echo $obj->id;?>" Поэтому мы проходим идентификатор строки для модального использования модального события bootstrap

 <td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td> 

Модальный HTML

Поместите следующий модальный HTML вне while loop на странице, где расположена указанная выше кнопка вызова (предпочтительнее внизу страницы)

 <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <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"> <div class="form-data"></div> //Here Will show the Data </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> </div> </div> </div> 

Теперь добавьте следующий скрипт на той же странице;

 <script> //jQuery Library Comes First //Bootstrap Library $( document ).ready(function() { $('#myModal').on('show.bs.modal', function (e) { //Modal Event 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 } }); }); }); </script> 

Теперь создайте PHP-файл и назовите его file.php (так же, как использование в методе Ajax)

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

В этом решении вам не нужен следующий скрипт для удаления данных внутри модальных или, другими словами, для обновления модальных

 $('#editBox').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); }); 

Альтернативное решение с функцией Ajax и jQuery Click

Кнопка Modal Call

 <td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td> 

Поместите следующий модальный HTML на страницу, где расположена выше модальная кнопка вызова (предпочтительнее внизу страницы)

 <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="form-data"></div> //Here Will show the Data </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

следующий код метода Ajax на той же странице, где расположена модальная кнопка HTML и модальный вызов.

 <script> //jQuery Library Comes First //Bootstrap Library $( document ).ready(function() { $('.open-modal').click(function(){ var id = $(this).attr('id'); $.ajax({ type : 'post', url : 'file.php', //Here you should run query to fetch records data : 'post_id='+ id, //Here pass id via success : function(data){ $('#editBox').show('show'); //Show Modal $('.form-data').html(data); //Show Data } }); }); }); </script> 

И файл PHP file.php будет таким же, как и указанное выше решение с модальным событием bootstrap

Перейти на страницу

В некоторых случаях нужно только передавать (отображать) минимальную информацию в модальную, которая уже доступна на странице, может быть выполнена только с помощью модального события без использования Ajax Method с data-attributes

 <td> <span data-placement="top" data-toggle="tooltip" title="Show"> <a data-book-id="<?php echo $obj->id;?>" data-name="<?php echo $obj->name;?>" data-email="<?php echo $obj->email;?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox"> <span class="glyphicon glyphicon-pencil"></span> </a> </span> </td> 

Модальное событие

 $(document).ready(function(){ $('#editBox').on('show.bs.modal', function (e) { var bookid = $(e.relatedTarget).data('book-id'); var name = $(e.relatedTarget).data('name'); var email = $(e.relatedTarget).data('email'); //Can pass as many onpage values or information to modal }); });