{"draftJsState":{"blocks":[{"data":{"image":{"id":"5dbeed4c2beb4900ae3c4cf8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"futfp"},{"data":{"image":{"id":"5dbeed245eb26800b0a34587"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ci1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практически каждый сайт использует модальные окна для различных целей: отображение уведомлений, подтверждение действий, сбор информации и прочее. В этой главе мы рассмотрим два способа отображения модальных окон: новый и универсальный.","type":"unstyled","key":"2kovu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новые модальные окна","type":"header-three","key":"8ksrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новые модальные окна имеют очень простой синтаксис HTML:","type":"unstyled","key":"fdoil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"t2me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":61,"style":"BOLD"}],"text":"Для отображения модального окна, необходимо добавить атрибут open","type":"unstyled","key":"9t72e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К сожалению, обойтись совсем без JavaScript здесь невозможно, поэтому далее я приведу пример кода, который минимизирует ваше взаимодействие с JavaScript. Мы можем использовать DATA-атрибуты для задания идентификатора модального окна, которое будет перехватываться JavaScript. Работать с этим просто:","type":"unstyled","key":"1lvh7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n","type":"blockquote","key":"fppoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":18,"style":"BOLD"},{"length":15,"offset":145,"style":"BOLD"}],"text":"Здесь, в атрибуте data-modal, мы задаем идентификатор модального окна. А далее, в кнопке, позволяющей показать модальное окно, используя атрибут data-modal-open, мы говорим, что эта кнопка показывает модальное окно с нашим идентификатором.","type":"unstyled","key":"4r8q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простое решение может выглядеть примерно так:","type":"unstyled","key":"e5q6o"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"Запустить пример","type":"unstyled","key":"abj6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизация","type":"header-three","key":"c04rv"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":15,"offset":235}],"inlineStyleRanges":[{"length":18,"offset":35,"style":"BOLD"},{"length":10,"offset":75,"style":"BOLD"}],"text":"Модальное окно, открытое с помощью dialog.openModal(), имеет псевдоэлемент ::backdrop. Этот элемент является подложкой под модальным окном и растянут на весь экран. Обычно этот элемент красят в прозрачно-чёрный цвет и добавляют к нему backdrop-filter. Этот набор фильтров позволяет, например, размыть всю страницу кроме модального окна для создания акцента на окно.","type":"unstyled","key":"dqqc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, можно добавить эффект появления модального окна. Для этого можно добавить немного CSS-кода:","type":"unstyled","key":"ar0dl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"dialog {\n animation: fadeIn 250ms ease-in-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}","type":"blockquote","key":"6sfju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код позволит модальному окну плавно появляться на экране.","type":"unstyled","key":"9ucdk"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":25,"offset":135}],"inlineStyleRanges":[],"text":"Рассмотренный выше способ в 2019 году работает далеко не во всех браузерах. Поддержку этого способа браузерами можно посмотреть здесь: Can i use Dialog element?","type":"unstyled","key":"1bnh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Универсальные модальные окна","type":"header-three","key":"1ammp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что делать, если нужно поддерживать большее количество браузеров? Выход один - использовать старые методы. Код будет не так изящен, зато работать будет везде.","type":"unstyled","key":"9vvmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n","type":"blockquote","key":"95jva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно же, придётся добавить много стилей:","type":"unstyled","key":"56nr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":111,"offset":62,"style":"BOLD"},{"length":14,"offset":219,"style":"BOLD"},{"length":31,"offset":400,"style":"BOLD"},{"length":67,"offset":454,"style":"BOLD"},{"length":33,"offset":805,"style":"BOLD"}],"text":".modal {\n /* Подложка будет занимать 100% площади экрана*/\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100vh;\n z-index: 1000;\n /* Скрываем подложку с модальным окном*/\n display: none;\n /* Overflow позволит нам скроллить модальное окно, если контента в нём будет больше, чем может поместиться на экране */\n overflow-y: auto;\n /* Цвет подложки */\n background: rgba(0, 0, 0, 0.8);\n /* Размытие фона */\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n /* Анимация появления */\n animation: fadeIn 250ms ease-in-out;\n /* Добавляем дополнительные стили */\n align-items: flex-start;\n justify-content: center;\n padding: 5vh 0 10vh;\n /* Через JavaScript мы будем добавлять атрибут open, что должно сделать модальное окно видимым*/\n}\n.modal[open] {\n display: flex;\n}\n.modal .dialog {\n /* Стилизуем само модальное окно */\n width: 100%;\n max-width: 960px;\n min-height: 100px;\n border-radius: 4px;\n position: relative;\n border: none;\n color: white;\n font-weight: 300;\n}\n.modal .dialog .dialog-close {\n /* Стилизуем кнопку закрытия модального окна */\n position: absolute;\n top: 0;\n right: 0;\n width: 3em;\n height: 3em;\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n}\n.modal .dialog .dialog-close::before,\n.modal .dialog .dialog-close::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n right: 5px;\n left: 5px;\n border-bottom: 1px solid white;\n transform: rotate(45deg);\n}\n.modal .dialog .dialog-close::after {\n transform: rotate(-45deg);\n}\n.modal .dialog .dialog-close:focus::before,\n.modal .dialog .dialog-close:hover::before,\n.modal .dialog .dialog-close:focus::after,\n.modal .dialog .dialog-close:hover::after {\n border-color: tomato;\n}\n.modal .dialog .dialog-content {\n /* Дополнительные стили для контента*/\n padding: 2em;\n background-color: rgba(0, 0, 0, 0.6);\n border: none;\n}\n/* Анимация появления*/\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}","type":"blockquote","key":"b4q38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее сложно: JavaScript. Чтобы уменьшить количество вашего взаимодействия с JavaScript, был снова сделан модуль, работающий через DATA-атрибуты. Всё, как и в предыдущий раз. С ним можно ознакомиться в коде примера:","type":"unstyled","key":"494kh"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"Запустить пример","type":"unstyled","key":"13jub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не изобретай велосипед","type":"header-three","key":"c776d"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":7,"offset":348},{"key":5,"length":10,"offset":359}],"inlineStyleRanges":[],"text":"Часто, лучшим способом является не создание собственного \"велосипеда\", а использование уже готового продукта. Модальные окна здесь не исключение. Можно просто найти хороший модуль модальных окон, прочитать к нему документацию и использовать его. Тогда практически не придется задумываться насчёт JavaScript и вёрстки окна. Примером могут послужить Tingle или Micromodal.","type":"unstyled","key":"4njv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3ud87"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":42,"offset":82},{"key":7,"length":49,"offset":206}],"inlineStyleRanges":[{"length":13,"offset":67,"style":"BOLD"}],"text":"Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/\nЕсли у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues ","type":"unstyled","key":"ckdi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"sDLMPkAJMoWVzlwT7i55"}],"entityMap":{"0":{"data":{"href":"https://codepen.io/artik-man/pen/RwwxdOq","url":"https://codepen.io/artik-man/pen/RwwxdOq"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/backdrop-filter","url":"https://developer.mozilla.org/ru/docs/Web/CSS/backdrop-filter"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://caniuse.com/#feat=dialog","url":"https://caniuse.com/#feat=dialog"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://codepen.io/artik-man/pen/qBBpGNe","url":"https://codepen.io/artik-man/pen/qBBpGNe"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://robinparisi.github.io/tingle/","url":"https://robinparisi.github.io/tingle/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://micromodal.now.sh/","url":"https://micromodal.now.sh/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://artik-man.github.io/HTML-Practice/","url":"https://artik-man.github.io/HTML-Practice/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://github.com/Artik-Man/HTML-Practice/issues","url":"https://github.com/Artik-Man/HTML-Practice/issues"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}