传递一个链接到带有iframe的Bootstrap模态窗口

Question

我有一个表格，每一行都有一个链接来编辑该记录的数据。链接将采用以下格式-> 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，但似乎没有起作用。我对编码相当新手，在这方面的任何帮助将不胜感激。

- Sankalp

---

https://dev59.com/yFsW5IYBdhLWcg3woYYj 中概述的方法之一应该可以修改以适应您的需求。 - CBroe

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");
  });
});

当点击a标签时，你可以设置iframe的src属性。从data-href获取值，设置iframe的src属性，然后显示模态窗口。

- SRK