Модальное окно на CSS3

<center><a href="#modalWindow" id="modalUrl">Открыть модальное окно, созданное на CSS3!</a> </center>  
  <a href="#modal" class="overlay" id="modalWindow"></a>  
  <div class="popup">  
  Это модальное окно, созданное на CSS3! Демо by uWebo4ka.3dn.ru<br>  
  <br>  
  <a class="close" href="#close">Закрыть</a>  
  </div>

.overlay {  
  background-color: #DFDFDF; /* Цвет фона */  
  opacity: 0; /* Изначально непрозрачный */  
  position: fixed; /* Фиксированное позиционирование */  
  right: 0; /* Справа 0 */  
  top: 0; /* Сверху 0 */  
  left: 0; /* Слева 0 */  
  bottom: 0; /* Снизу 0 */  
  visibility: hidden; /* Изначально невидимый */  

  /* transition старт */  
  -webkit-transition:All 1s ease;  
  -moz-transition:All 1s ease;  
  -o-transition:All 1s ease;  
}  
.overlay:target {  
  visibility: visible; /* Делает видимым */  
  opacity: 1; /* Фон становится полностью прозрачным */  
}  
.popup {  
  background-color: #478CFB; /* Фон */  
  padding: 20px; /* Внутренние отступы */  
  position: fixed; /* Фиксированное расположение */  
  visibility: hidden; /* Изначально - спрятан */  
  z-index: 10; /* z-index */  
  color:#fff; /* Цвет */  
  font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */  
}  

.popup a {  
  color:#fff; /* Цвет */  
  font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */  
}
.overlay:target+.popup {  
  top: 30%; /* Расположение */  
  left: 30%; /* Расположение */  
  opacity: 1; /* Убирает прозрачность */  
  visibility: visible; /* Делает видимым */  
}</style>