Простое диалоговое окно подтверждения

demosourse

Просто диалоговое окно подтверждения вашего действия, сопровождающееся CSS3 анимацией.

Практически в каждом проекте присутствует компонент, который мы рассмотрим в этом уроке: его можно использовать для подтверждения удаления каких-то элементов или наоборот.

Создание структуры

HTML структура очень проста: в элемент с классом .cd-popup будет помещёно наше всплывающее окно (включая полу-прозрачный фон). Элемент .cd-popup-container будет играть роль контейнера, а ненумерованный список будет содержать два элемента: для отмены или подтверждения действия.

<div class="cd-popup" role="alert">
    <div class="cd-popup-container">
        <p>Are you sure you want to delete this element?</p>
        <ul class="cd-buttons">
            <li><a href="#0">Yes</a></li>
            <li><a href="#0">No</a></li>
        </ul>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

Стили

Единственное что можно отметить в этой секции, так это добавление CSS анимации. Изначальная позиция окна будет чуть сдвинута по оси Y (transform: translateY(-40px)). Данное значение изменится во время анимации на translateY(0).

.cd-popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  transform: translateY(-40px);
  transition-property: transform;
  transition-duration: 0.3s;
}

.is-visible .cd-popup-container {
  transform: translateY(0);
}

Обработка событий

В jQuery мы просто добавляем/удаляем упомянутые классы к элементам страницы.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/simple-confirmation-popup/
Перевел: Станислав Протасевич
Урок создан: 21 Февраля 2016
Просмотров: 7767
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^