Edit in JSFiddle



    <!-- Show modal link-->
    <a href="#" onClick="showModal()">Click here to show modal</a>
    <!-- Modal -->
    <div id="modal" class="modal">
      <div class="modal-content">
        <!-- Close button-->
        <span class="close-button close-modal">&times;</span>
        <!-- Modal contents-->
        This is an example of a modal that you can use to improve your UI.
        What it does:
          <li>Modal launches when you click on the "Show Modal" link from the main page.</li>
          <li>Modal closes when you click on the X button on the upper right hand of this box.</li>
          <li>Modal also closes when you click on anywhere outside the modal.</li>
        <br> Hope you find this useful!

function showModal() {
  //Get the modal
  var modal = document.getElementById('modal');
  //Get button that closes the modal
  var close_modal = document.getElementsByClassName("close-modal")[0];

  //Shows the modal
  modal.style.display = "block";

  // When the user clicks on (x), close the modal
  close_modal.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";
body {
  font-family: Arial, sans-serif;
  font-size: 14px;

a:active {
  color: #0099cc;
  text-decoration: underline;

/* Modal background */

.modal {
  display: none;
  position: fixed;
  z-index: 1.;
  padding-top: 100px;
  left: 0;
  top: 0;
  min-width: 300px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  background-color: rgba(0, 0, 0, 0.4);

/* Modal content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  width: 500px;

/* Close Button */

.close-button {
  color: #aaaaaa;
  float: right;
  font-size: 20px;
  font-weight: bold;

.close-button:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;