Эффекты для диалоговых окон

Сразу стоит отметить, что данные примеры превосходно работают в последних версиях браузеров.

Для каждого диалогового окна мы будем использовать следующую разметку:

Код
<div id="somedialog" class="dialog">
  <div class="dialog__overlay"></div>
  <div class="dialog__content">
  <h2><strong>Howdy</strong>, I'm a dialog box</h2><
  div><button class="action" data-dialog-close>Close</button></div>
  </div>
</div>

В будущем стоит воспользоваться элементом <dialog>. На данный момент он плохо поддерживается в IE, Firefox и Safari.

Как видно из примера, в нашем контейнере содержится блок-затемнитель и сам контент диалогового окна. Стандартные стили будут выглядеть так (браузерные префиксы опущены):

Код
.dialog,
.dialog__overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.dialog {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dialog__overlay {
  position: absolute;
  z-index: 1;
  background: rgba(55, 58, 71, 0.9);
  opacity: 0;
  transition: opacity 0.3s;
}

.dialog--open .dialog__overlay {
  opacity: 1;
  pointer-events: auto;
}

.dialog__content {
  width: 50%;
  max-width: 560px;
  min-width: 290px;
  background: #fff;
  padding: 4em;
  text-align: center;
  position: relative;
  z-index: 5;
  opacity: 0;
}

.dialog--open .dialog__content {
  pointer-events: auto;
}

/* Content */
.dialog h2 {
  margin: 0;
  font-weight: 400;
  font-size: 2em;
  padding: 0 0 2em;
  margin: 0;
}

Мы используем flexbox для основного элемента диалогового окна, чтобы разместить его по центру экрана. Для появления затемнения воспользуемся анимацией.

Стиль для примера под названием Sandra:

Код
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
  animation-name: anim-open;
}

.dialog.dialog--close .dialog__content {
  animation-name: anim-close;
}

@keyframes anim-open {
  0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes anim-close {
  0% { opacity: 1; }
  100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

Надеемся, что данные примеры будут полезны! </dialog>

  • FalleN

  • 3005

  • 1

  • 288
Теги: animation, svg, dialog, Modal

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!