Модальное всплывающее окно на CSS3

Модальное окно всплывающее строго по центтру с анимацией на чистом CSS с помощью скрытых чекбоксов

by Andrey Dobrovoi

HTML

<div class="wrap">
  		<header>
			<h1>Модальное Окно CSS3</h1>
		</header>
  <div class="box-white">
    <label class="open-modal" for="modalTrigger">Открыть Окно</label>
  </div>
<section>
    <p style="text-align:center"><a href="#">Изучить Детали</a> </p>
    <p style="text-align:center">сделано с любовью - <a href="https://twitter.com/dobrovoi">@dobrovoi</a> </p>
</section>
</div>


  <input id="modalTrigger" type="checkbox">
  <div class="modalOverlay">
    <div class="modalWrap">
      <label for="modalTrigger">&#10006;</label>
      <h2>Это ваш модальный контент</h2>
      <p>Lorem ipsum dolor sit amet, ea stet atomorum consectetuer ius. Tota ancillae eum id. Cu sale docendi his. Et his labitur nominati tractatos, alia fastidii iracundia duo ea. Ex has veritus prodesset, vix eros forensibus quaerendum cu, per et hendrerit adipiscing. Usu tota offendit explicari te, an aeque scripta comprehensam usu, sale tacimates antiopam id has.</p>
      <p>Molestie offendit eam eu, sed facer falli omittam cu, ut has volutpat iracundia. Pro ubique gubergren scriptorem et, vel impetus honestatis te. Virtute ceteros contentiones duo et, id tota similique pro, qui an volumus luptatum sensibus. Nec eu odio invenire intellegat, audire suscipiantur signiferumque no mel. Et lorem alienum interpretaris pro.</p>
    </div>
  </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,cyrillic);
* {
  box-sizing: border-box;
}
body {
  background: #fefefe;
  margin: 0;
  line-height: 1.5;
  font-family: 'Roboto',sans-serif;
}
h1,
h2,
h3{
  font-weight: 300;
  margin: 0 0 1.4rem 0;
}
a {
    color: #006b05;
    text-decoration: none;
}
.wrap header {
  padding: 7vh 10vw;
  background: #ffebee;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrap header h1 {
    margin: 0 auto;
    color: rgba(0,0,0,0.54);
    font-weight: 300;
}
.box-white {
  max-width: 100%;
  background-color: #fff;
  text-align: center;
  padding: 40px;
}
.open-modal {
  background: rgba(46, 111, 146, 0);
  border: 1px solid #2e6f92;
  border-radius: 5px;
  box-sizing: border-box;
  color: #1269a2;
  display: inline-block;
  padding: 15px 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 300ms ease-in;
  cursor: pointer;
  font-size: 14px;
  font-weight: 100;
}

.open-modal:hover {
  background: rgba(46, 111, 146, 0.8);
  color: #FFF;
}



.modalOverlay {
  background: rgba(41, 41, 41, 0.69);
  left: 0; top:0;
  margin: 0 auto;
  position: fixed;
  text-shadow: none;
  z-index: -100;
    width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modalWrap {
  background: #ddd;
  padding: 1em;
  position: relative;
  margin: 0 auto;
  width: 50%;
  max-width: 860px;
}

.modalWrap > label {
  float: right;
  cursor: pointer;
}

input {
  position: absolute;
  top: -1000px
}

input:checked ~ .modalOverlay {
 ...

JavaScript

/* ========================================================================= */
/*	shurawi --- dbmast.ru ---
/* ========================================================================= */