SightMap in Pure JS Modal on Mobile

This is a demonstration of a SightMap embedded in a pure JavaScript modal implementation. On screens small enough to be mobile devices, a link allows the user to open and close the SightMap modal. On larger screens, the SightMap is embedded in line, as normal.

by Jacob Pearlstein

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">
    <!-- 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/e8ywkqrqwlx" frameborder="0" id="sightmap"></iframe>
  </div>
</div>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #eff8ff;
  margin: 0; /* make this zero so that there's no extra space in this example*/
}

h2 {
  text-align: center;
}

@media only screen and (max-width: 767px) {
  /* This block of code will only apply if it's small enough to be a mobile device. */
  
  /* Just some padding for the link. */
  a#modal-link {
    padding-left: 2em;
  }
  
  /* Styling for the background of the modal, when active. */
  
  .modal {
    /* Keep the modal invisible until someone clicks on the link to open it (see JS). */
    display: none;
    
    /* Position it when visible in fixed screen cooordinates, 
    such that it will occupy the entire screen. The padding 
    forces the contents to be offset from the top of the screen.*/
    position: fixed;
    z-index: 1000;
    padding-top: 65px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    
    /* Set the background color to solid black, then override it 
    to a translucent black for browsers that can do RGBA colors. */
    background-color: black;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  /* Styling for the close button. */
  
  .close-cursor {
    /* Make a bolded, white X in the to right corner of the screen. */
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close-cursor:hover,
  .colse-cursor:focus {
    /* When the user hovers over the button, or puts it in focus, 
    turn the button dark grey and change the cursor to a pointer.*/
    color: #999999;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Styling for the actual contents of the modal. */
  
  .modal-content {
    /* Position the contents relative to the enclosing background. */
    position: relative;
    
    /* Differentiate the div from the black background, as necessary. */
    background-color: #fefefe;
    
    /* set the...

JavaScript

function openModal()
{
	document.getElementById('my-modal').style.display = "block";
}

function closeModal()
{
	document.getElementById('my-modal').style.display = "none";
}