Модальное окно CSS №2

Всплывающее по центру модальное окно выполненное исключительно средствами CSS3

by Andrey Dobrovoi

HTML

<p>Это просто небольшой пример <a href="#win-1">модального</a> окна.</p>
<div id="win-1" class="modaloverlay">
  <div class="modal">
    <a href="#close" class="close">&times;</a>
      <img src="http://placehold.it/500x500">
  </div> 
</div>

CSS

body {
  font-family: sans-serif;
}

.modaloverlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  z-index: -1;
}

.modaloverlay:target {
  opacity: 1;
  pointer-events: auto;
  z-index: 99999;
}

.modal {
  background-color: white;
  border: 1px solid #383838;  
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);  
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);  
  position: relative;
  margin: 10% auto;
  min-width: 300px;  
  max-width: 500px;
  padding:4px;
  /*> iframe, > div{
    border:none;
    width:100%;
    height:100%;
  }*/
}
.modal > img{
    width:100%;
    display: block;
    border-radius: 3px;
}
.close {
   background-color: grey;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
   border: 1px solid #696969;
   border-radius: 50%; 
   color: cornsilk;
   font-size: 22px;
   height: 22px;
   line-height: 23px;
   position: absolute;
   right: -8px;
   text-align: center;
   text-decoration: none;
   top: -10px;
   width: 22px;
}

.close:hover {
  background-color: red;
  border: 1px solid #C00202;
  color: white;
}