Появляющийся модальное окно на CSS

/* Слой перекрытия */
  .modal
{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.5);
z-index:9;
/* Трансформации прозрачности при открытии */
transition:opacity 511ms ease-in;
/*Скрываем изначально*/
opacity:0;pointer-events:none
}
   
/* Показываем модальное окно */
.modal:target
{
opacity:1;pointer-events:auto
}
/* Содержание */
.modal>div{
width:586px;background:#fff;position:relative;margin:9% auto;
/*По умолчанию минимизируем анимацию*/
-webkit-animation:minimise 511ms linear;
/*Придаем хороший вид*/
padding:31px;
border-radius:7px;box-shadow:0 3px 9px #000;
text-shadow:0 1px 0 #fff;
}
/*Изменяем анимацию при открытии модального окна*/
.modal:target>div{
-webkit-animation-name:bounce
}
.modal h2{
font-size:35px;padding:0 0 9px;
}
@-webkit-keyframes bounce{0%{-webkit-transform:scale3d(.1,.1,1);
-webkit-box-shadow:0 3px 9px #000}55%{-webkit-transform:scale3d(1,1,1);
-webkit-box-shadow:0 9px 9px #000}75%{-webkit-transform:scale3d(1,1,1);
-webkit-box-shadow:0 0 9px #000}100%{-webkit-transform:scale3d(1,1,1);
-webkit-box-shadow:0 3px 9px #000}}
@-webkit-keyframes minimise{0%{-webkit-transform:scale3d(1,1,1)}100%{-webkit-transform:scale3d(.1,.1,1)}}
/*Ссылка на кнопку Закрыть*/
.modal a[href="#close"]{position:absolute;right:0;top:0;color:transparent}
/*Сбрасываем изменения*/
.modal a[href="#close"]:focus{outline:none}
/*Создаем кнопку Закрыть*/
.modal a[href="#close"]:after{content:'X';display:block;
/*Позиционируем*/
position:absolute;right:-9px;top:-9px;width:19px;padding:1px;
/*Стили*/
text-decoration:none;
text-shadow:none;
text-align:center;
font-weight:bold;
background:#000;
color:#fff;
border:3px solid #fff;
border-radius:19px;
box-shadow:0 1px 3px #000
}
.modal a[href="#close"]:focus:after,.modal a[href="#close"]:hover:after{-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
}
.modal a[href="#close"]:focus:after{outline:0 solid #000}
/*Открываем модальное окно*/a.openModal{}
a.openModal:hover,a.openModal:focus{}
.modal .modal_title{display:block;text-align:center;font-size:19pt}

<a href="#modal" class="openModal">Открыть модальное окно</a>
<div id="modal" class="modal">
<div>
<div class="text"> НАЧАЛО Статья для начинающих веб мастеров или кто хочет создать свой блог или ресурс. Хочется вам кратко изложить с чего начинать. Но первое это нужно выбрать сам хостинг, где будет и располагаться ваш сайт, он может быть платным и бесплатным.<div><br>   
<div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/CSS-ZORNET/ND/vecst/mac-image1.gif"></div><div align="center"><br></div>
Рекомендую создавать на системе uCoz, так как сама система очень гибкая и главное понятное. Вы всегда можете найти Скрипты для ucoz которые будут вам очень полезны для дизайна сайта, но больше безусловно для его функциональности. Вы можете поставить бесплатный шаблон и потом применить коды по его изменению и у вас будет совершенно оригинальный интернет ресурс.</div> ЗДЕСЬ ЗАКОНЧИЛАСЬ </div>
<a href="#close" title="Закрыть">Закрыть</a>
</div>
</div>