SightMap in Pure JS Modal

This is a demonstration of a SightMap embedded in a pure JavaScript modal implementation. Note that the maximum height of the modal will be fixed to 450 pixels on screens small enough to be mobile devices. This helps keep things manageable on ridiculously small screens.

HTML

<h2>
  This Is a Pure HTML & JS Modal Demonstration
</h2>

<a href="javascript:void(0);" id="modal-link" onclick="openModal()">Open the modal!</a>

<!-- This outer div will act as the black background for the modal, and 
encapsulate its contents and controls (i.e. the SightMap and close button). -->
<div id="my-modal" class="modal">

  <!-- The close button itself will just be the multiplication 
  symbol (cross product, not dot product) -->
  <span class="close-cursor" onclick="closeModal()">&times;</span>

  <!-- The div that will contain the actual lightbox contents.  In 
  this case, it will just act as a container for the SightMap. -->
  <div class="modal-content" style="width:100%; height: 80vh;">
    <!-- At last, the iFrame.  The width and height will be 100% 
    of whatever dimensions we assigned to the contining div. -->
    <iframe width="100%" height="100%" src="https://sightmap.com/embed/er5v5r3jpny" frameborder="0" id="sightmap"></iframe>
  </div>
</div>