Passing a link to bootstrap modal window with a iframe

Question

I have a table where each row has a link to edit the data for that record. The link will be in the following format -> modal_edit.php?id=2

On clicking the link it should open the link in an iframe which is located inside a bootstrap-4 modal window.

I am not sure how to achieve this. I have tried searching for a solution but those did not help.

Here is my code for the link:

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

And code for modal:

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

I have also tried sending the link using data-id and updating the src but it didn't seem to work. I am fairly new to coding and any help in this regard will be appreciated.

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

You can use set the src of an iframe on click of the a tag. Get the value from data-href , set the src of an iframe and then show the modal window.