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

by Ksenia Polyakova

HTML

<div id="modal">
  <input type="radio" id="toggle-open" name="modal"/>
  <label class="modal-open-btn" for="toggle-open" onclick="">Log in</label>
  <label class="modal-container" for="toggle-close" onclick="">
    <label class="modal-content" for="toggle-open" onclick="">
      <input type="radio" id="toggle-close" name="modal"/>
      <label class="modal-close-btn" for="toggle-close" onclick="">×</label>
      <p>Hi there fellow Cat, you are meow logged in!</p>
    </label>
  </label>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure incidunt neque magni quas laudantium possimus exercitationem sequi totam libero porro modi itaque placeat cum, sint laboriosam quaerat assumenda, quos, amet!</p>
  </section>
</div>

CSS

#modal {
  text-align: center;
  -webkit-animation: onload 1.3s ease both;
          animation: onload 1.3s ease both;
}
#modal section {
  margin: 0 auto;
  max-width: 700px;
}
#modal input {
  display: none;
}
label.modal-container {
  background: rgba(255,255,255,0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
}
label.modal-content {
  margin: 50px auto 0;
  background: #eee;
  min-height: 300px;
  padding: 1rem;
  width: 100%;
  max-width: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#toggle-open:checked ~ .modal-container {
  visibility: visible;
  -webkit-animation: enter 0.7s ease both;
          animation: enter 0.7s ease both;
}
#toggle-open:not(:checked) ~ .modal-container {
  -webkit-animation: leave 0.7s ease both, hide 0.8s linear both;
          animation: leave 0.7s ease both, hide 0.8s linear both;
}
.modal-open-btn,
.modal-close-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  color: #00f;
}
.modal-open-btn:hover,
.modal-close-btn:hover,
.modal-open-btn:focus,
.modal-close-btn:focus {
  background: none;
  outline: none;
}
.modal-open-btn:visted,
.modal-close-btn:visted {
  color: #00f;
}
.modal-close-btn {
  position: absolute;
  top: 0.2em;
  right: 0.5em;
  font-size: 2em;
}
@-webkit-keyframes onload {
  0%, 70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes onload {
  0%, 70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes leave {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes leave {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes hide {
  0% {
    visibility: visible;
  }
  100% {
   ...