HTML modal window using Javascript and CSS

An application of w3school's tutorial here: https://www.w3schools.com/howto/howto_css_modals.asp

by Yan Dave

HTML

<html>

  <head>
  </head>

  <body>
    <!-- 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-->
        <h2>
          Hello!
        </h2>
        This is an example of a modal that you can use to improve your UI.
        <br>
        <br>
        What it does:
        <ul>
          <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>
        </ul>
        <br> Hope you find this useful!
        <br><br>
      </div>
    </div>
  </body>

</html>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

a:link,
a:visited,
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;
}

JavaScript

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";
    }
  }
}