传递
id,从数据库获取记录以进行传递
id并以模式显示的简单解决方案是;
简单的解决方案
模态通话按钮
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span ></span></a></span></td>
模态HTML
将以下模式HTML放在
while loop上述调用按钮所在的页面内(最好在页面底部)
<div id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div > //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 > <button type="button" data-dismiss="modal">×</button> <h4 ><center>Heading</center></h4></div><div > //Show records fetched from database against $Id</div><div > <button type="button" >Submit</button> <button type="button" 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 Call按钮中,
href="file.php?id=<?php echo $obj->id;?>使用data属性替换,
data-id="<?php echo $obj->id;?>"以便我们使用bootstrap modal
event将行的id传递给modal
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span ></span></a></span></td>
模态HTML
将以下模式HTML放在
while loop上述调用按钮所在的页面内(最好在页面底部)
<div id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div > <div > <button type="button" data-dismiss="modal">×</button> <h4 ><center>Heading</center></h4> </div> <div > <div ></div> //Here Will show the Data </div> <div > <button type="button" >Submit</button> <button type="button" 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 hereif($_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功能的替代解决方案
模态通话按钮
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a href="" id="<?php echo $obj->id;?>"><span ></span></a></span></td>
将以下模式HTML放在模式调用按钮上方的页面中(最好在页面底部)
<div id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div > <div > <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 id="myModalLabel">Modal title</h4> </div> <div > <div ></div> //Here Will show the Data </div> <div > <button type="button" data-dismiss="modal">Close</button> <button type="button" >Save changes</button> </div> </div> </div></div>
在Modal HTML和Modal调用按钮所在的页面中,遵循以下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>
并且PHP文件
file.php将与 上述解决方案 相同,并 带有引导程序模式事件
将页面信息传递给模态
在某些情况下,只需要将很少的信息传递(显示)到模态(已在页面上提供),只需使用引导模态事件即可
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;?>" data-toggle="modal" data-target="#editBox"> <span ></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 });});
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)