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

by Dmitry Nazarov

HTML

<input  type="radio" name="myModal" id="noceck">
    <label  for="noceck"><span class="knopka">Нажми меня!</span></label>

<div class="test">
    <div class="bgModal"></div><!--ФОН модального окна-->
    <div class="modalBlock"><!--Блок модального окна-->
        <div class="offBlock">
            <input  type="radio" name="myModal" id="noceck2">
            <label  for="noceck2">✖</label>
        </div>
        <div class="blockCont">
           Здесь может быть что угодно, например форма регистрации
        </div>
    </div>
</div>

<!--Интересует создание решений на css3, js, html
   Email: [email protected]
   Агент mail.ru: [email protected]
   Skype: joomla_cms
-->

CSS

*{margin:0; padding:0;}
.knopka {
  display: inline-block;
	cursor: pointer;
	color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  padding:20px;
  font-size:20px;
}
.test {
    position:absolute;
    display:none;
}
#noceck{display:none;}/* Убирает сам checkbox*/
#noceck[type=radio]:checked  ~ .test {
    top:0;
    display:block;
    width:100%;
    height:100%;
    animation: onModal  3s forwards;
}
@keyframes onModal {
    from {opacity:0;}
    to {opacity:1;}
}
.bgModal{
  position:fixed;
  width:100%;
  height:100%;
  background:#000;
  opacity:0.7;
 
}
.modalBlock{
  position:absolute;
  width:400px;
  height:300px;
  background:#fff;
  left:50%;
  top:50%;
  margin-left:-200px;
  margin-top:-150px;
}
.offBlock{
  color: #fff;
  background: #337ab7;
  width:100%;
  height:20px;
}
#noceck2{
  display:none;
}
#noceck2 + label{
  cursor:pointer;
  float:right;
  padding:0 10px ;
}
.blockCont{
  padding:10px;
}