twitter-bootstrap 如何将 $_GET 变量从链接传递到引导模式？

How to pass $_GET variables from a link to a bootstrapmodal?

提问by sdfgg45

Snippet from my HTML code.

来自我的 HTML 代码的片段。

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

The modual that are beeing opened when link is clicked:

单击链接时正在打开的模块：

<!-- Modal -->
    <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">
            <?php var_dump($_GET)?>
          </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>

Is there a proper way to pass my id into the modal?

有没有正确的方法将我的 id 传递到模态中？

回答by Shehary

The simple solution to pass id, fetch records from database against passed idand show in modal is;

pass 的简单解决方案id，从数据库中获取记录，id并以模式显示；

---

---

Simple Solution

简单的解决方案

Modal Call button

模态呼叫按钮

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

Modal HTML

模态 HTML

Put following modal HTML outside the while loopin page where the above call button is located (preferable at bottom of page)

将以下模态 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>

Now Create a PHP file and name it file.php

现在创建一个 PHP 文件并命名它 file.php

This file is called with modal call button href="file.php?id=<?php echo $obj->id;?>"

使用模态调用按钮调用此文件 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>

To remove the data inside modal or in other words to refresh the modal when open next records without page refresh, use following script

要在没有页面刷新的情况下打开下一条记录时删除模态内的数据或换句话说刷新模态，请使用以下脚本

Put it after jQuery and Bootstrap library (Remember jQuery & Bootstrap libraries always come first)

把它放在 jQuery 和 Bootstrap 库之后（记住 jQuery 和 Bootstrap 库总是排在最前面的）

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

---

---

Alternate Solution with Ajax and Bootstrap Modal Event Listener

使用 Ajax 和 Bootstrap 模态事件侦听器的替代解决方案

In Modal Call button replace href="file.php?id=<?php echo $obj->id;?>with data attribute data-id="<?php echo $obj->id;?>"so we pass the id of row to modal using bootstrap modal event

在模态调用按钮中替换href="file.php?id=<?php echo $obj->id;?>为数据属性，data-id="<?php echo $obj->id;?>"因此我们使用引导模态事件将行的 id 传递给模态

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

Modal HTML

模态 HTML

Put following modal HTML outside the while loopin page where the above call button is located (preferable at bottom of page)

将以下模态 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>

Now Add following script in same page;

现在在同一页面中添加以下脚本；

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

Now Create a PHP file and name it file.php(same as use in Ajax Method)

现在创建一个 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
 }
?>

In this solution, you don't need following script to remove the data inside modal or in other words to refresh the modal

在此解决方案中，您不需要以下脚本来删除模态内的数据或换句话说刷新模态

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

---

---

Alternate Solution with Ajax and jQuery Click function

使用 Ajax 和 jQuery Click 功能的替代解决方案

Modal Call button

模态呼叫按钮

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

Put following modal HTML in page where above modal call button located (preferable at bottom of page)

将以下模态 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>

following Ajax method code in same page where Modal HTML & Modal call button located.

在模态 HTML 和模态调用按钮所在的同一页面中遵循 Ajax 方法代码。

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

And the PHP file file.phpwill be same as the above solution with bootstrap modal event

并且 PHP 文件file.php将与上述带有 bootstrap modal 事件的解决方案相同

---

---

Pass On page information to Modal

将页面信息传递给 Modal

In some cases, only need to pass (display) minimal information to modal which already available on page, can be done with just bootstrap modal event without Ajax Methodwith data-attributes

在某些情况下，只需要将最少的信息传递（显示）到页面上已经可用的模态，只需引导模态事件即可完成，无需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>

Modal Event

模态事件

$(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  
     });
});