Opening a link inside a div in the modal

Question

I have a modal in which there are 2 <a> tags. When a user clicks the link, the link should be opened in the same div of the same modal and not in the tab.

For this I tried:

$(document).ready(function() {
  $("#help_modal a").each(function() {
    $("#help_modal").load($(this).attr("href"));
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <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" id="help_modal">
          <a href="https://google.com" class="btn btn-block btn-lg btn-primary">Open Google</a>
          <a href="https://stackoverflow.com" class="btn btn-block btn-lg btn-secondary">Open Stackoverflow</a>
        </div>

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

      </div>
    </div>
  </div>

</div>

But the link is opening in the same tab...

UPDATE

I also tried this answer, but it also didn't work for me after this comment.

Answer 1

Answer to your comment:

If you check the console while running the JSFiddle it says,

Refused to display 'Opening a link inside a div in the modal' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Which means,

The content is prohibited from being displayed within an IFRAME due to the Content Security Policy being set. The web server hosting stackoverflow.com is configured to add an HTTP header to the response object. Specifically, they are setting the Content-Security-Policy tag to frame-ancestors 'self'. There is no way you'll be able to embed their pages into a page of your own using IFRAME.

Thanks to TimmyB's answer.

---

Answer to your question:

Learner's answer is also a good option. (+1)

But I will prefer to have different iframe(s) and display them through the button.

$(document).ready(function() {
  $(".modal_button_example_com_self").click(function() {
    $('.modal_button_self').hide();
    $('#example_com').attr("style", "");
  });

  $(".modal_button_example_net_self").click(function() {
    $('.modal_button_self').hide();
    $('#example_net').attr("style", "");
  });

  $(".close_self").click(function() {
    $('.modal_button_self').attr("style", "");
    $('#example_com').hide();
    $('#example_net').hide();
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Open modal
    </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

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

        <!-- Modal body -->
        <div class="modal-body" id="help_modal">
          <button class="modal_button_self modal_button_example_com_self btn btn-block btn-lg btn-primary">Open Example.com</button>
          <button class="modal_button_self modal_button_example_net_self btn btn-block btn-lg btn-secondary">Open Example.net</button>

          <iframe id="example_com" style="display: none;" src="https://example.com/" width="100%" height="50%" seamless></iframe>
          <iframe id="example_net" style="display: none;" src="https://example.net/" width="100%" height="50%" seamless></iframe>

        </div>

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

      </div>
    </div>
  </div>
</div>

Answer 2

I manage to achieve what you want with some javascript and the html 'object' tag:

I replace the content of your modal body with the content of the toReplace variable, containing an html 'object' element, use to embed the external link.

let el = document.getElementById("test");
let elToReplace = document.getElementById("help_modal");
let toReplace = "<object type=\"text/html\" data=\"https://gnu.org/\" width=\"100%\" height=\"600px\" style=\"overflow:auto;border:5px ridge blue\"> </object>";

function replaceInner() {
    elToReplace.innerHTML = toReplace;
}

el.addEventListener("click", () => { replaceInner(); }, false);

See a working codepen here : https://codepen.io/marc-simplon/pen/WBVmYW