Небольшая коллекция эффектов на базе CSS анимации. В некоторых примерах используется SVG и преобразования путей при помощи Snap.svg. Сразу стоит отметить, что данные примеры превосходно работают в последних версиях браузеров. Для каждого диалогового окна мы будем использовать следующую разметку: 1 <div id="somedialog" class="dialog"> 2 <div class="dialog__overlay"></div> 3 <div class="dialog__content"> 4 <h2><strong>Howdy</strong>, I'm a dialog box</h2>< 5 div><button class="action" data-dialog-close>Close</button></div> 6 </div> 7 </div> В будущем стоит воспользоваться элементом <dialog>. На данный момент он плохо поддерживается в IE, Firefox и Safari. Как видно из примера, в нашем контейнере содержится блок-затемнитель и сам контент диалогового окна. Стандартные стили будут выглядеть так (браузерные префиксы опущены): 01 .dialog, 02 .dialog__overlay { 03 width: 100%; 04 height: 100%; 05 top: 0; 06 left: 0; 07 } 08 09 .dialog { 10 position: fixed; 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 pointer-events: none; 15 } 16 17 .dialog__overlay { 18 position: absolute; 19 z-index: 1; 20 background: rgba(55, 58, 71, 0.9); 21 opacity: 0; 22 transition: opacity 0.3s; 23 } 24 25 .dialog--open .dialog__overlay { 26 opacity: 1; 27 pointer-events: auto; 28 } 29 30 .dialog__content { 31 width: 50%; 32 max-width: 560px; 33 min-width: 290px; 34 background: #fff; 35 padding: 4em; 36 text-align: center; 37 position: relative; 38 z-index: 5; 39 opacity: 0; 40 } 41 42 .dialog--open .dialog__content { 43 pointer-events: auto; 44 } 45 46 /* Content */ 47 .dialog h2 { 48 margin: 0; 49 font-weight: 400; 50 font-size: 2em; 51 padding: 0 0 2em; 52 margin: 0; 53 } Мы используем flexbox для основного элемента диалогового окна, чтобы разместить его по центру экрана. Для появления затемнения воспользуемся анимацией. Стиль для примера под названием Sandra: 01 .dialog.dialog--open .dialog__content, 02 .dialog.dialog--close .dialog__content { 03 animation-duration: 0.3s; 04 animation-fill-mode: forwards; 05 } 06 07 .dialog.dialog--open .dialog__content { 08 animation-name: anim-open; 09 } 10 11 .dialog.dialog--close .dialog__content { 12 animation-name: anim-close; 13 } 14 15 @keyframes anim-open { 16 0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 17 100% { opacity: 1; transform: scale3d(1, 1, 1); } 18 } 19 20 @keyframes anim-close { 21 0% { opacity: 1; } 22 100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); } 23 } Надеемся, что данные примеры будут полезны!