Vienkāršs paziņojuma logs uzpiežot uz pogas

by Antikrists

HTML

<div class="modal"> 
  <a href="#modal" class="open">Atvērt</a> 
  <div class="modal_content" id="modal"> 
  <div class="title">Tavs teksts.</div> 
  <a href="#" class="close">Aizvērt</a> 
  </div> 
</div>

CSS

/* Kopejais saisu stils */ 
.modal a {display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; text-decoration: none !important; margin: 10px auto 0; box-shadow: 0 0 0 1px #fff; color: #fff; transition: opacity .4s;} 

/* Kopejais saisu stils uzejot uz tam */ 
.modal a:hover, .modal a:active {opacity: .6;} 

/* Stils pogai atvert */ 
.modal a.open {background: #07f;} 

/* Stils pogai aizvert */ 
.modal a.close {background: #FF3D1E;} 

/* Neiztikt! Sis ir domats logs ir centra */ 
.modal .modal_content {left: 0; top: 0; right: 0; bottom: 0; margin: auto;} 

/* Loga stils */ 
.modal .modal_content {position: fixed; display: block; background: #fff; padding: 20px; width: 250px; height: 100px; box-shadow: 0 5px 0 0 #07f inset, 0 0 0 1000px rgba(34,34,34,.65); text-align: center; font-size: 15px; line-height: 1.5;} 

/* Loga izzusanas efekts */ 
#modal:not(:target) {opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;} 

/* Loga paradisanas efekts */ 
#modal:target {opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s;}