Stupid html modal

gistfile1.html

<style>
#container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  visibility: visible;
  z-index: 1000;
  display: table;
}
#overlay {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: lightgray;
  opacity: 0.8;
}
#modal {
  background-color: white;
  border: 1px solid darkgray;
  border-radius: 8px;
  width: 640px;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
 }
 </style>
 <div id="container">
  <div id="overlay">
    <div id="modal">
      <h1>Stupid modal</h1>
      <p>Partially blocks out the page with a translucent overlay and centers a message box on it.</p>
      <p>Needs controls</p>
    </div>
  </div>
</div>