Question

我有一个表，其中每一行都有一个链接来编辑该记录的数据。该链接将采用以下格式 - ＆gt; modal_edit.php？ID = 2

点击链接后，它应该打开位于bootstrap-4模式窗口内的iframe中的链接。

我不知道如何实现这一目标。我试过寻找解决方案，但那些没有帮助。

以下是我的链接代码：

<td><center><a href="modal_edit.php?id=' . $row['id'] . '"  data-toggle="modal" data-target="#myModal"><i class="fas fa-edit"></i></a></center></td>

模态代码：

<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">Modal Heading</h4>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">
      <iframe src="modal_edit.php" width="600" height="380" frameborder="0" allowtransparency="true"></iframe>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>

  </div>
</div>

我也尝试使用data-id发送链接并更新src但它似乎不起作用。我对编码很新，在这方面的任何帮助都将不胜感激。

Answer 1

<td><center><a href="#" data-href="modal_edit.php?id=' . $row['id'] . '" class="showModal"><i class="fas fa-edit"></i></a></center></td>

$(document).ready(function(){
 $(".showModal").click(function(e){
   e.preventDefault();
   var url = $(this).attr("data-href");
   $("#myModal iframe").attr("src", url);
   $("#myModal").modal("show");
 });
});

您可以在点击标签时使用设置iframe的src。从data-href获取值，设置iframe的src，然后显示模态窗口。

使用iframe将链接传递给bootstrap模态窗口

1 个答案: