Simple JavaScript Popup Modal

simple-modal-popup.css

/* Put this in your preferred CSS location */
/* Modal CSS */
/* The Modal (background) */
.sls-modal {
  display: none;
    position: fixed;
    z-index: 999;
		left: 0;
		right: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 8% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


@media screen and (max-width: 820px) {
	
	.modal-content { 
    position: absolute;
    left: 9vw;
    height: 100%; /* If content is too tall for phone view, this lets it scroll */
    overflow: auto; /* If content is too tall for phone view, this lets it scroll */
	}
	
}

simple-modal-popup.html

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p> <!-- Modial Content Goes Here --> </p>
  </div>

</div>

simple-modal-popup.js

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn")[0];

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
  console.log("btn was clicked");
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
// This is to remove any existing href value
  jQuery('.myBtn a').attr("href", "javascript:void(0)");