Как создать простое модальное окно для сайта

<div class="overlay-container">
  <div class="window-container zoomin">
  <h3>Модальное окно с эффектом уменьшения</h3>
  <div align=center>Вы просматриваете простое модальное окно для сайта <br/>
  с эффектом увеличения созданное с помощью CSS3<br/></div>
  <span class="close">Закрыть</span>
  </div>
  <div class="window-container zoomout">
  <h3>Модальное окно с эффектом увеличения</h3>
  <div align=center>Вы просматриваете простое модальное окно для сайта <br/>
  с эффектом увеличения созданное с помощью CSS3<br/></div>
  <span class="close">Закрыть</span>
  </div>
  </div>

.overlay-container {
  display: none;
  content: " ";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
}

.window-container {
  display: block;
  background: #fcfcfc;
  margin: 8em auto;
  width: 500px;
  padding: 10px 20px 20px;
  text-align: left;
  z-index: 3;
  border-radius: 3px;
  box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
  transition: 0.4s ease-out;
  opacity: 0;
}

  .window-container h3 {
  margin: 1em 0 0.5em;
  font-family: "Oleo Script";
  font-weight: normal;
  font-size: 25px;
  text-align: center;
  }

  .close {
  margin: 1em auto;
  display: block;
  width: 52px;
  background: linear-gradient(top, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
  border: 1px solid #aaa;
  padding: 5px 14px;
  color: #444;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  border-radius: 3px;
  box-shadow: 0 1px 3px #ddd;
  transition: 0.2s linear;
  cursor: pointer;
  }

  .close:hover {
  background: linear-gradient(top, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid #aaa;
  }

  .close:active {
  background: linear-gradient(to bottombottom, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  }

.zoomin {
  transform: scale(1.2);
}

.zoomout {
  transform: scale(0.7);
}

.window-container-visible {
  transform: scale(1);
  opacity: 1;
}

$(document).ready(function() {
   
  $('.button').click(function() {
   
  type = $(this).attr('data-type');
   
  $('.overlay-container').fadeIn(function() {
   
  window.setTimeout(function(){
  $('.window-container.'+type).addClass('window-container-visible');
  }, 100);
   
  });
  });
   
  $('.close').click(function() {
  $('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
  });
   
});