Linking Directly to an Open Modal Window Through a Url

// Get the modalvar modal = document.getElementById("myModal");
// Get the button that opens the modalvar btn = document.getElementById("myBtn");
// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal btn.onclick = function() {  modal.style.display = "block";}
// When the user clicks on <span> (x), close the modalspan.onclick = function() {  modal.style.display = "none";}
// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {  if (event.target == modal) {    modal.style.display = "none";  }}

body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */.modal {  display: none; /* Hidden by default */  position: fixed; /* Stay in place */  z-index: 1; /* Sit on top */  padding-top: 100px; /* Location of the box */  left: 0;  top: 0;  width: 100%; /* Full width */  height: 100%; /* Full height */  overflow: auto; /* Enable scroll if needed */  background-color: rgb(0,0,0); /* Fallback color */  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}
/* Modal Content */.modal-content {  background-color: #fefefe;  margin: auto;  padding: 20px;  border: 1px solid #888;  width: 80%;}
/* The Close Button */.close {  color: #aaaaaa;  float: right;  font-size: 28px;  font-weight: bold;}
.close:hover,.close:focus {  color: #000;  text-decoration: none;  cursor: pointer;}

<h2>Modal Example</h2>
<!-- Trigger/Open The Modal --><a href="#" id="myBtn">Open Modal</a>
<!-- The Modal --><div id="myModal" class="modal">
  <!-- Modal content -->  <div class="modal-content">    <span class="close">×</span>    <p>Some text in the Modal..</p>  </div>
</div>

Bootstrap - direct link to modal window

You might be able to do something like this.

if (window.location.hash == "#imprint") {
     $('#myModal').modal('show');
}

How do I link to a modal dialog from an external link?

You must facilitate the feature yourself. Lets say you have normal bootstrap modal like this :

<div class="modal fade" id="payment">
  <div class="modal-dialog">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

and you want to invoke the modal on page load in a link sent to some users :

http://www.example.com#payment

Then add this code snippet to your page :

$(document).ready(function() {  
  var modals = ['#payment', '#anotherModal'];
  if (window.location.hash && ~modals.indexOf(window.location.hash)) {
     $(window.location.hash).modal();
  }
})

This is of course by far the most simple way to do it.

How to use the direct link to modal window

http://jsfiddle.net/kge5rqv3/4/

var hash = window.location.hash.substring(1);
if (hash == 'modal1') {
     popModal();
}

function popModal()
{
    $('#modal1').modal('show');
}

NEW JS: http://jsfiddle.net/kge5rqv3/7/

var id= getUrlParameter('id');

if (id == 'modal1') {
     popModal();
}

function popModal()
{
    $('#modal1').modal('show');
}


function getUrlParameter(sParam)
{

    var sPageURL = window.location.search.substring(1);    

    //simulate url http://example.com?id=modal1
    //remove when implementing this code
    var sPageURL='id=modal1';

    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
} 

Opening a link inside a div in the modal

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">×</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>