猿问
下载APP

如何将$ _GET变量从链接传递给bootstrapmodal?

如何将$ _GET变量从链接传递给bootstrapmodal?

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

单击链接时打开的模块:

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

有没有一种方法可以将我的身份证传递给模态?


慕标5265247
浏览 64回答 3
3回答

慕容森

传递的简单解决方案id,从数据库获取记录反对传递id和显示模态;简单解决方案模态呼叫按钮<td><span&nbsp;data-placement="top"&nbsp;data-toggle="tooltip"&nbsp;title="Show"><a&nbsp;class="btn&nbsp;btn-primary&nbsp;btn-xs"&nbsp;data-toggle="modal"&nbsp;data-target="#editBox"&nbsp;href="file.php?id=<?php&nbsp;echo&nbsp;$obj->id;?>"><span&nbsp;class="glyphicon&nbsp;glyphicon-pencil"></span></a></span></td>模态HTML将以下模式HTML放在while loop上面调用按钮所在的页面之外(最好在页面底部)<div&nbsp;class="modal&nbsp;fade"&nbsp;id="editBox"&nbsp;tabindex="-1"&nbsp;role="dialog"&nbsp;aria-labelledby="myModalLabel"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-dialog"&nbsp;role="document"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-content"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Content&nbsp;Will&nbsp;show&nbsp;Here&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>现在创建一个PHP文件并命名它&nbsp;file.php使用模态调用按钮调用此文件&nbsp;href="file.php?id=<?php echo $obj->id;?>"<?php//Include&nbsp;database&nbsp;connection&nbsp;here$Id&nbsp;=&nbsp;$_GET["id"];&nbsp;//escape&nbsp;the&nbsp;string&nbsp;if&nbsp;you&nbsp;like//&nbsp;Run&nbsp;the&nbsp;Query?><div&nbsp;class="modal-header"> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="close"&nbsp;data-dismiss="modal">&times;</button> &nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;class="modal-title"><center>Heading</center></h4></div><div&nbsp;class="modal-body"> &nbsp;&nbsp;&nbsp;&nbsp;//Show&nbsp;records&nbsp;fetched&nbsp;from&nbsp;database&nbsp;against&nbsp;$Id</div><div&nbsp;class="modal-footer"> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-default">Submit</button> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-default"&nbsp;data-dismiss="modal">Close</button></div>要删除模态内的数据,或者换句话说,在没有页面刷新的情况下打开下一条记录时刷新模态,请使用以下脚本把它放在jQuery和Bootstrap库之后(记住jQuery和Bootstrap库总是先行)<script>$(&nbsp;document&nbsp;).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('#editBox').on('hidden.bs.modal',&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).removeData('bs.modal'); &nbsp;&nbsp;&nbsp;&nbsp;});});</script>使用Ajax和Bootstrap模式事件监听器的备用解决方案在模态调用按钮中替换href="file.php?id=<?php echo $obj->id;?>数据属性,data-id="<?php echo $obj->id;?>"因此我们使用bootstrap模态事件将行的id传递给模态<td><span&nbsp;data-placement="top"&nbsp;data-toggle="tooltip"&nbsp;title="Show"><a&nbsp;class="btn&nbsp;btn-primary&nbsp;btn-xs"&nbsp;data-toggle="modal"&nbsp;data-target="#editBox"&nbsp;data-id="<?php&nbsp;echo&nbsp;$obj->id;?>"><span&nbsp;class="glyphicon&nbsp;glyphicon-pencil"></span></a></span></td>模态HTML将以下模式HTML放在while loop上面调用按钮所在的页面之外(最好在页面底部)<div&nbsp;class="modal&nbsp;fade"&nbsp;id="editBox"&nbsp;tabindex="-1"&nbsp;role="dialog"&nbsp;aria-labelledby="myModalLabel"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-dialog"&nbsp;role="document"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-content"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-header"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="close"&nbsp;data-dismiss="modal">&times;</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;class="modal-title"><center>Heading</center></h4> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-body"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="form-data"></div>&nbsp;//Here&nbsp;Will&nbsp;show&nbsp;the&nbsp;Data&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-footer"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-default">Submit</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-default"&nbsp;data-dismiss="modal">Close</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>现在在同一页面中添加以下脚本;<script>//jQuery&nbsp;Library&nbsp;Comes&nbsp;First//Bootstrap&nbsp;Library$(&nbsp;document&nbsp;).ready(function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$('#myModal').on('show.bs.modal',&nbsp;function&nbsp;(e)&nbsp;{&nbsp;//Modal&nbsp;Event &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;id&nbsp;=&nbsp;$(e.relatedTarget).data('id');&nbsp;//Fetch&nbsp;id&nbsp;from&nbsp;modal&nbsp;trigger&nbsp;button &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;:&nbsp;'post', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;:&nbsp;'file.php',&nbsp;//Here&nbsp;you&nbsp;will&nbsp;fetch&nbsp;records&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data&nbsp;:&nbsp;&nbsp;'post_id='+&nbsp;id,&nbsp;//Pass&nbsp;$id &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;function(data){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.form-data').html(data);//Show&nbsp;fetched&nbsp;data&nbsp;from&nbsp;database &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;});});</script>现在创建一个PHP文件并命名它file.php(与在Ajax方法中使用相同)<?php//Include&nbsp;database&nbsp;connection&nbsp;hereif($_POST['id'])&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$id&nbsp;=&nbsp;$_POST['id']; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Run&nbsp;the&nbsp;Query &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Fetch&nbsp;Records &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Echo&nbsp;the&nbsp;data&nbsp;you&nbsp;want&nbsp;to&nbsp;show&nbsp;in&nbsp;modal &nbsp;}?>在此解决方案中,您不需要以下脚本来删除模态内的数据,换句话说,刷新模式$('#editBox').on('hidden.bs.modal',&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).removeData('bs.modal');});使用Ajax和jQuery Click功能的备用解决方案模态呼叫按钮<td><span&nbsp;data-placement="top"&nbsp;data-toggle="tooltip"&nbsp;title="Show"><a&nbsp;class="btn&nbsp;btn-primary&nbsp;btn-xs"&nbsp;class="open-modal"&nbsp;href=""&nbsp;id="<?php&nbsp;echo&nbsp;$obj->id;?>"><span&nbsp;class="glyphicon&nbsp;glyphicon-pencil"></span></a></span></td>在上面的模态调用按钮所在的页面中放置以下模式HTML(最好在页面底部)<div&nbsp;class="modal&nbsp;fade"&nbsp;id="editBox"&nbsp;tabindex="-1"&nbsp;role="dialog"&nbsp;aria-labelledby="myModalLabel"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-dialog"&nbsp;role="document"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-content"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-header"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="close"&nbsp;data-dismiss="modal"&nbsp;aria-label="Close"><span&nbsp;aria-hidden="true">&times;</span></button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;class="modal-title"&nbsp;id="myModalLabel">Modal&nbsp;title</h4> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-body"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="form-data"></div>&nbsp;//Here&nbsp;Will&nbsp;show&nbsp;the&nbsp;Data&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-footer"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-default"&nbsp;data-dismiss="modal">Close</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-primary">Save&nbsp;changes</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>跟随模态HTML和模态调用按钮所在的同一页面中的Ajax方法代码。<script>//jQuery&nbsp;Library&nbsp;Comes&nbsp;First//Bootstrap&nbsp;Library$(&nbsp;document&nbsp;).ready(function()&nbsp;{&nbsp; &nbsp;&nbsp;$('.open-modal').click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;id&nbsp;=&nbsp;$(this).attr('id'); &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;:&nbsp;'post', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;:&nbsp;'file.php',&nbsp;//Here&nbsp;you&nbsp;should&nbsp;run&nbsp;query&nbsp;to&nbsp;fetch&nbsp;records &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data&nbsp;:&nbsp;'post_id='+&nbsp;id,&nbsp;//Here&nbsp;pass&nbsp;id&nbsp;via&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;function(data){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#editBox').show('show');&nbsp;//Show&nbsp;Modal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.form-data').html(data);&nbsp;//Show&nbsp;Data &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;});});</script>PHP文件file.php与上面的解决方案相同,带有bootstrap模态事件将页面信息传递给Modal在某些情况下,只需要将最小信息传递(显示)到已经在页面上可用的模态,只需要使用bootstrap模态事件即可Ajax Method完成data-attributes<td> &nbsp;&nbsp;<span&nbsp;data-placement="top"&nbsp;data-toggle="tooltip"&nbsp;title="Show"> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;data-book-id="<?php&nbsp;echo&nbsp;$obj->id;?>"&nbsp;data-name="<?php&nbsp;echo&nbsp;$obj->name;?>"&nbsp;data-email="<?php&nbsp;echo&nbsp;$obj->email;?>"&nbsp;class="btn&nbsp;btn-primary&nbsp;btn-xs"&nbsp;data-toggle="modal"&nbsp;data-target="#editBox">&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="glyphicon&nbsp;glyphicon-pencil"></span> &nbsp;&nbsp;&nbsp;&nbsp;</a> &nbsp;&nbsp;</span></td>模态事件$(document).ready(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$('#editBox').on('show.bs.modal',&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bookid&nbsp;=&nbsp;$(e.relatedTarget).data('book-id'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;name&nbsp;=&nbsp;$(e.relatedTarget).data('name'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;email&nbsp;=&nbsp;$(e.relatedTarget).data('email'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Can&nbsp;pass&nbsp;as&nbsp;many&nbsp;onpage&nbsp;values&nbsp;or&nbsp;information&nbsp;to&nbsp;modal&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});});

一只名叫tom的猫

据我所知,不,你不能跳过file.php,逻辑上的原因是当页面加载它上面的所有东西时加载,当你用id调用modal时,你期望在停留在同一页面时运行一个函数或查询并且没有任何外部文件源。

尚方宝剑之说

我对您的上一个示例“将页面信息传递给Modal”感兴趣。为了论证,让我们说<a data-book-id="<?php echo $obj->id;?>"等于<a data-book-id="10"......我如何将“10”带入模态窗口并将其分配给php变量?即:<?php $bookID = '10'; ?>?
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答