Wie kann man eine modale Dialogbox mit CSS und JavaScript erstellen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      height:100%;
      margin:0;
      padding:0;
      font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
      font-size: 20px;
      color: #000000;
      }
      #example {
      visibility: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width:100%;
      height:100%;
      text-align:center;
      z-index: 1000;
      }
      #example div {
      width:350px;
      height: 80px;
      margin: 100px auto;
      background-color: #f2f2f2;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius:  10px;
      border:1px solid #666666;
      padding:15px;
      text-align:center;
      font-weight: bold;
      font-size: 15px;
      border: 3px solid #cccccc;
      position: absolute;
      left: 50%;
      top: 100px;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Modale Box erstellen</h2>
    <a href='#' onclick='example()'>open</a>
    <div id="example">
      <div>
        <p>Die Inhalte, die der Benutzer sehen soll, gehen hierhin.</p>
        <a href='#' onclick='example()'>Um die Box zu schließen, klicken Sie hier</a>
      </div>
      <script> 
        function example() {
        el = document.getElementById("example");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        }
      </script>
    </div>
  </body>
</html>