Справочник верстальщика

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

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

• .overlay {
      background-color: pink; 
      opacity: 0; 
      position: fixed;
      right: 0;  
      top: 0;  
      left: 0;  
      bottom: 0;  
      visibility: hidden; 
  .overlay:target {
      visibility: visible;
      opacity: 1;}
  .popup {background: red; 
      padding: 20px; 
      position: fixed;  
      visibility: hidden; 
      z-index: 10;   
      color:#fff; }
  .popup a {
      color:#fff; 
  }
  .overlay:target+.popup {top: 30%; left: 30%;opacity: 1; visibility: visible; }