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

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

Легкое и красивое модальное окно для сайта на чистом CSS, хорошо подойдет для того чтобы разместить в нем необходимую информацию. Это модальное окно поможет облегчить его установку и не тратить много времени.

Пример

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML


<div class="modal-window">
  <input type="checkbox" class="modal-trigger" id="modal-window">
  <label class="modal-overlay" for="modal-window"></label>
  <label class="btn-modal" for="modal-window">
    Открыть
  </label>
  <!-- Модальное окно -->
  <div class="modal-container">        
    <!-- Содержимое модального окна -->
    <div class="modal-content">
      <div class="modal-content-header">
        <h3 class="modal-content-title">
          Lorem ipsum
        </h3>
      </div>
      <div class="modal-content-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <!-- Кнопка Закрыть -->
      <div class="modal-content-footer">
        <label for="modal-window" class="item action">
          Закрыть
        </label>
      </div>
    </div>
    <!-- Конец содержимого модального окна -->        
  </div>
</div>

CSS


/* Модальное окно */
.modal-window{
  display: inline-block;
}
.modal-window > .modal-trigger {
  display: none;
}
.modal-window > .modal-trigger ~ .modal-overlay {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  visibility: hidden;
  transition: opacity 0.3s;
  background-color: rgba(0,0,0,0.5);
}
.modal-window > .modal-trigger ~ .modal-container {
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 110;
  position: fixed;
  visibility: hidden;
  transition: opacity 0.3s;
  transform: translate(-50%, -50%);
}
.modal-window > .modal-trigger:checked ~ .modal-overlay,
.modal-window > .modal-trigger:checked ~ .modal-container {
  opacity: 1;
  visibility: visible;
}

/* Кнопка */
.btn-modal {
  color: #fff;
  cursor: pointer;
  line-height: 3rem;
  padding: 1rem 3rem;
  background-color: #83bec5;
}
.btn-modal:hover {
  background-color: #527c82;
}

/* Содержимое модального окна */
.modal-content {
  overflow: hidden; /*Для прокрутки в модальном окне надо поменять на overflow: auto и добавить высоту окна*/
  background-color: #fff;
}
.modal-content .modal-content-header,
.modal-content .modal-content-body {
  padding: 1rem 2rem;
}

/* Кнопка Закрыть */
.modal-content .modal-content-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content .modal-content-footer .item {
  flex: 1;
  padding: 1rem;
  text-align: center;
}
.modal-content .modal-content-footer .item.action {
  background-color: #83bec5;
  cursor: pointer;
}
.modal-content .modal-content-footer .item.action:hover {
  background-color: #aed9e1;
}
Скачать исходники
By julia