1 added
1 removed
Original
2026-01-01
Modified
2026-03-10
1
<ul><li><a>Определение</a></li>
1
<ul><li><a>Определение</a></li>
2
<li><a>Принцип функционирования и структура</a></li>
2
<li><a>Принцип функционирования и структура</a></li>
3
<li><a>Преимущества и недостатки</a></li>
3
<li><a>Преимущества и недостатки</a></li>
4
<li><a>Особенности</a></li>
4
<li><a>Особенности</a></li>
5
<li><a>Создание всплывающего окна</a><ul><li><a>Подготовка разметки</a></li>
5
<li><a>Создание всплывающего окна</a><ul><li><a>Подготовка разметки</a></li>
6
</ul></li>
6
</ul></li>
7
<li><a>Базовые стили</a><ul><li><a>Оживление всплывающего окна</a></li>
7
<li><a>Базовые стили</a><ul><li><a>Оживление всплывающего окна</a></li>
8
</ul></li>
8
</ul></li>
9
</ul><p>Модальные окна CSS - популярный компонент интерфейса большинства современных веб-страниц. Этот элемент может использоваться для вывода разнообразного контента с сайта, рекламы и уведомлений. Он чаще всего создается при помощи JavaScript, но можно обойтись и средствами HTML5/CSS3.</p>
9
</ul><p>Модальные окна CSS - популярный компонент интерфейса большинства современных веб-страниц. Этот элемент может использоваться для вывода разнообразного контента с сайта, рекламы и уведомлений. Он чаще всего создается при помощи JavaScript, но можно обойтись и средствами HTML5/CSS3.</p>
10
<p>Далее предстоит познакомиться с соответствующим компонентом поближе. Предстоит выяснить, что он собой представляет, какими особенностями обладает, для чего используется. Также вниманию будет представлен пример создания модальных окон. Эта информация пригодится всем веб-разработчикам.</p>
10
<p>Далее предстоит познакомиться с соответствующим компонентом поближе. Предстоит выяснить, что он собой представляет, какими особенностями обладает, для чего используется. Также вниманию будет представлен пример создания модальных окон. Эта информация пригодится всем веб-разработчикам.</p>
11
<h2>Определение</h2>
11
<h2>Определение</h2>
12
<p>Модальное окно (или PopUp) - это окно, которое появляется на веб-сайте поверх других документов и окон. Оно делает весь контент, расположенный на странице, недоступным до тех пор, пока пользователь не начнет взаимодействовать с ним.</p>
12
<p>Модальное окно (или PopUp) - это окно, которое появляется на веб-сайте поверх других документов и окон. Оно делает весь контент, расположенный на странице, недоступным до тех пор, пока пользователь не начнет взаимодействовать с ним.</p>
13
<p>Такое окно блокирует работу клиента с родительским приложением. Оно напоминает уведомление. Функционирование онлайн-страницы будет восстановлено, как только пользователь закроет изучаемый элемент. Ниже - его наглядный пример.</p>
13
<p>Такое окно блокирует работу клиента с родительским приложением. Оно напоминает уведомление. Функционирование онлайн-страницы будет восстановлено, как только пользователь закроет изучаемый элемент. Ниже - его наглядный пример.</p>
14
<p>PopUp при появлении становится единственно активным в пользовательском интерфейсе элементом. Все остальные окна могут выступать только в качестве фона. На пользовательские действия они никак не реагируют.</p>
14
<p>PopUp при появлении становится единственно активным в пользовательском интерфейсе элементом. Все остальные окна могут выступать только в качестве фона. На пользовательские действия они никак не реагируют.</p>
15
<h2>Принцип функционирования и структура</h2>
15
<h2>Принцип функционирования и структура</h2>
16
<p>Pop Up предусматривает следующую структуру:</p>
16
<p>Pop Up предусматривает следующую структуру:</p>
17
<ol><li>Заголовок. Он указывает на то, с каким всплывающим окном будет иметь дело пользователь.</li>
17
<ol><li>Заголовок. Он указывает на то, с каким всплывающим окном будет иметь дело пользователь.</li>
18
<li>Кнопки взаимодействия. Они отвечают за выполнение тех или иных действий.</li>
18
<li>Кнопки взаимодействия. Они отвечают за выполнение тех или иных действий.</li>
19
<li>Тень. Используется для создания контраста на странице. Это необходимо для корректного отображение Pop Up на экране.</li>
19
<li>Тень. Используется для создания контраста на странице. Это необходимо для корректного отображение Pop Up на экране.</li>
20
</ol><p>Работает Поп Ап так: фон занимает 100 % рабочего пространства сайта или приложения. Он бывает прозрачным или затемненным. Сквозь него может виднеться открытая страница. Это помогает пользователю понять, что информация/контент имеется, но без совершения тех или иных действий доступ к ней ограничен.</p>
20
</ol><p>Работает Поп Ап так: фон занимает 100 % рабочего пространства сайта или приложения. Он бывает прозрачным или затемненным. Сквозь него может виднеться открытая страница. Это помогает пользователю понять, что информация/контент имеется, но без совершения тех или иных действий доступ к ней ограничен.</p>
21
<p>Поверх фона появляется диалоговое окно с сообщением и элементами управления. Система будет ожидать пользовательских действий. В зависимости от выбранной команды осуществляется та или иная операция. Пример - сайт может быть закрыт или доступ к информации на веб-портале будет полностью предоставлен клиенту.</p>
21
<p>Поверх фона появляется диалоговое окно с сообщением и элементами управления. Система будет ожидать пользовательских действий. В зависимости от выбранной команды осуществляется та или иная операция. Пример - сайт может быть закрыт или доступ к информации на веб-портале будет полностью предоставлен клиенту.</p>
22
<h2>Преимущества и недостатки</h2>
22
<h2>Преимущества и недостатки</h2>
23
<p>Google указывает на то, что всплывающие окна, как и другие элементы онлайн-страниц, предусматривают ряд преимуществ и недостатков. Зная о них, разработчики смогут понять, насколько целесообразно использовать изучаемый компонент в своем проекте.</p>
23
<p>Google указывает на то, что всплывающие окна, как и другие элементы онлайн-страниц, предусматривают ряд преимуществ и недостатков. Зная о них, разработчики смогут понять, насколько целесообразно использовать изучаемый компонент в своем проекте.</p>
24
<p>К плюсам всплывающих окон Google относит:</p>
24
<p>К плюсам всплывающих окон Google относит:</p>
25
<ol><li>Сбор контактных данных. Pop Up может включать в себя форму, запрашивающую все необходимые сведения для обратной связи. Для пользователя такой прием удобен тем, что не нужно искать соответствующую вкладку по всему веб-порталу. Необходимые данные удастся получить буквально за один клик.</li>
25
<ol><li>Сбор контактных данных. Pop Up может включать в себя форму, запрашивающую все необходимые сведения для обратной связи. Для пользователя такой прием удобен тем, что не нужно искать соответствующую вкладку по всему веб-порталу. Необходимые данные удастся получить буквально за один клик.</li>
26
<li>Возможность вывода важных предупреждений. Всплывающие окна, согласно Google, могут сообщать пользователям о различных значимых манипуляциях. Это помогает предотвратить непредвиденные ситуации. Пример - незапланированное удаление содержимого корзины в интернет-магазине.</li>
26
<li>Возможность вывода важных предупреждений. Всплывающие окна, согласно Google, могут сообщать пользователям о различных значимых манипуляциях. Это помогает предотвратить непредвиденные ситуации. Пример - незапланированное удаление содержимого корзины в интернет-магазине.</li>
27
<li>Возможность быстрого доступа к корзине. Соответствующая практика имеет значение для e-commerce. Пример - пользователь хочет быстро посмотреть содержимое корзины и сумму предстоящей покупки. Некоторые Интернет-магазины предлагают перейти для этого на отдельную страницу, отдаляя клиентов от просматриваемых каталогов. С помощью Pop Up можно вывести соответствующие данные на экран, оставаясь на "прежней" странице.</li>
27
<li>Возможность быстрого доступа к корзине. Соответствующая практика имеет значение для e-commerce. Пример - пользователь хочет быстро посмотреть содержимое корзины и сумму предстоящей покупки. Некоторые Интернет-магазины предлагают перейти для этого на отдельную страницу, отдаляя клиентов от просматриваемых каталогов. С помощью Pop Up можно вывести соответствующие данные на экран, оставаясь на "прежней" странице.</li>
28
</ol><p>Google также указывает, что создаются всплывающие окна разными способами и без существенных хлопот. Можно справиться с этой задачей как средствами JavaScript, так и только за счет CSS/HTML.</p>
28
</ol><p>Google также указывает, что создаются всплывающие окна разными способами и без существенных хлопот. Можно справиться с этой задачей как средствами JavaScript, так и только за счет CSS/HTML.</p>
29
<p>К недостаткам изучаемого элемента Google относит:</p>
29
<p>К недостаткам изучаемого элемента Google относит:</p>
30
<ol><li>Вероятность появления спама. Некоторые всплывающие окна буквально заваливают пользователей ненужной информацией. Иногда это происходит почти сразу после посещения приложения или сайта.</li>
30
<ol><li>Вероятность появления спама. Некоторые всплывающие окна буквально заваливают пользователей ненужной информацией. Иногда это происходит почти сразу после посещения приложения или сайта.</li>
31
<li>Нанесение вреда функционированию других приложений. Иногда Pop Up может помешать пользователю работать, а в редких случаях - приводит к утрате проделанной многочасовой работы. Примером служат конфузные ситуации, возникающие при выполнении разнообразных задач в Windows 95 и 98. Они возникали из-за появления всплывающих окон прямо поверх рабочего стола, а не окна приложения/сайта. В Windows NT и последующих сборках операционных систем от Microsoft данная проблема была устранена.</li>
31
<li>Нанесение вреда функционированию других приложений. Иногда Pop Up может помешать пользователю работать, а в редких случаях - приводит к утрате проделанной многочасовой работы. Примером служат конфузные ситуации, возникающие при выполнении разнообразных задач в Windows 95 и 98. Они возникали из-за появления всплывающих окон прямо поверх рабочего стола, а не окна приложения/сайта. В Windows NT и последующих сборках операционных систем от Microsoft данная проблема была устранена.</li>
32
<li>Незаметные модальные окна. Обычно они встречаются в open-source-приложениях. Пример - у пользователя открыто множество одинаковых программ, в одной из них появляется предупреждающее всплывающее окно. Приходится тратить немало времени на прояснение ситуации с зависанием системы.</li>
32
<li>Незаметные модальные окна. Обычно они встречаются в open-source-приложениях. Пример - у пользователя открыто множество одинаковых программ, в одной из них появляется предупреждающее всплывающее окно. Приходится тратить немало времени на прояснение ситуации с зависанием системы.</li>
33
</ol><p>Google отмечает, что модальное окно - это удобная технология, но использовать ее необходимо осторожно.</p>
33
</ol><p>Google отмечает, что модальное окно - это удобная технология, но использовать ее необходимо осторожно.</p>
34
<h2>Особенности</h2>
34
<h2>Особенности</h2>
35
<p>Верстка сайтов - это процесс, предусматривающий немало особенностей. Случается так, что на компьютере или ноутбуке все работает исправно, а в мобильной версии веб-портала - нет. Поэтому Google рекомендует запомнить следующие особенности всплывающих окон HTML/CSS:</p>
35
<p>Верстка сайтов - это процесс, предусматривающий немало особенностей. Случается так, что на компьютере или ноутбуке все работает исправно, а в мобильной версии веб-портала - нет. Поэтому Google рекомендует запомнить следующие особенности всплывающих окон HTML/CSS:</p>
36
<ol><li>Адаптивность. Pop Up - это важные интерфейсные элементы, помогающие пользователям. Именно поэтому при их создании необходимо обратить внимание на адаптивность соответствующего компонента для мобильных устройств. Большая часть Интернет-пользователей посещает приложения и сайты со смартфонов/планшетов.</li>
36
<ol><li>Адаптивность. Pop Up - это важные интерфейсные элементы, помогающие пользователям. Именно поэтому при их создании необходимо обратить внимание на адаптивность соответствующего компонента для мобильных устройств. Большая часть Интернет-пользователей посещает приложения и сайты со смартфонов/планшетов.</li>
37
<li>Кросс-браузерность. Google говорит о том, что этот параметр указывает на одинаково хорошее отображение/функционирование сайта/приложения в разных браузерах. В процессе создания модальных окон могут возникать проблемы с их корректным выводом или работоспособностью. Пример - в Google Chrome кнопки работают, а в Safari - нет. Во избежание подобных ситуаций необходимо тестировать изучаемый элемент в разных браузерах.</li>
37
<li>Кросс-браузерность. Google говорит о том, что этот параметр указывает на одинаково хорошее отображение/функционирование сайта/приложения в разных браузерах. В процессе создания модальных окон могут возникать проблемы с их корректным выводом или работоспособностью. Пример - в Google Chrome кнопки работают, а в Safari - нет. Во избежание подобных ситуаций необходимо тестировать изучаемый элемент в разных браузерах.</li>
38
<li>Пользовательский опыт и визуальное оформление. Google подчеркивает, что дизайнеры и разработчики не слишком часто уделяют внимание логике и дизайну всплывающих HTML-окон. Это негативно сказывается на посещаемости портала/приложения. Пользователи хотят, чтобы подобные элементы были максимально простыми и визуально симпатичными. Соответствующие особенности необходимо учесть при их создании и внедрении на веб-портал.</li>
38
<li>Пользовательский опыт и визуальное оформление. Google подчеркивает, что дизайнеры и разработчики не слишком часто уделяют внимание логике и дизайну всплывающих HTML-окон. Это негативно сказывается на посещаемости портала/приложения. Пользователи хотят, чтобы подобные элементы были максимально простыми и визуально симпатичными. Соответствующие особенности необходимо учесть при их создании и внедрении на веб-портал.</li>
39
</ol><p>Теперь, когда особенности и определение изучаемого компонента понятны, можно создать modal window.</p>
39
</ol><p>Теперь, когда особенности и определение изучаемого компонента понятны, можно создать modal window.</p>
40
<h2>Создание всплывающего окна</h2>
40
<h2>Создание всплывающего окна</h2>
41
<p>Google подчеркивает, что PopUp window может быть создан несколькими способами - с применением JS и без него. Далее приведен пример с использованием языка программирования JavaScript. Предстоит создать простейшее модальное окно, которое предупреждает посетителя сайта о том, что он планирует очистить корзину.</p>
41
<p>Google подчеркивает, что PopUp window может быть создан несколькими способами - с применением JS и без него. Далее приведен пример с использованием языка программирования JavaScript. Предстоит создать простейшее модальное окно, которое предупреждает посетителя сайта о том, что он планирует очистить корзину.</p>
42
<h3>Подготовка разметки</h3>
42
<h3>Подготовка разметки</h3>
43
<p>Пользоваться тегами HTML и другими элементами верстки не обязательно для первого примера реализации изучаемого компонента страницы. Сначала необходимо создать контейнер для позиционирования элементов интерфейса на экране. После этого - сформировать div, в который оборачивается заголовок страницы. Сюда также будет входить кнопка, отвечающая за запуск pop up. В конце применяются стили при помощи id и class.</p>
43
<p>Пользоваться тегами HTML и другими элементами верстки не обязательно для первого примера реализации изучаемого компонента страницы. Сначала необходимо создать контейнер для позиционирования элементов интерфейса на экране. После этого - сформировать div, в который оборачивается заголовок страницы. Сюда также будет входить кнопка, отвечающая за запуск pop up. В конце применяются стили при помощи id и class.</p>
44
<p>Вот как это будет выглядеть в коде:</p>
44
<p>Вот как это будет выглядеть в коде:</p>
45
<p>А вот сам поп ап, который появляется при нажатии на кнопку. В примере заданы классы, скрывающие его до нажатия клиентом кнопки "Удалить все товары из корзины":</p>
45
<p>А вот сам поп ап, который появляется при нажатии на кнопку. В примере заданы классы, скрывающие его до нажатия клиентом кнопки "Удалить все товары из корзины":</p>
46
<p>Теперь остается сформировать окошко, которое появится при клике по кнопке "Да":</p>
46
<p>Теперь остается сформировать окошко, которое появится при клике по кнопке "Да":</p>
47
<p>Предварительная подготовка завершена. Теперь можно задавать стили и внедрять JS-код, чтобы все работало исправно.</p>
47
<p>Предварительная подготовка завершена. Теперь можно задавать стили и внедрять JS-код, чтобы все работало исправно.</p>
48
<h2>Базовые стили</h2>
48
<h2>Базовые стили</h2>
49
<p>В Google можно найти множество примеров CSS modal. В созданном ранее проекте необходимо не просто создать Pop Up, а еще и "привести его в порядок". А именно:</p>
49
<p>В Google можно найти множество примеров CSS modal. В созданном ранее проекте необходимо не просто создать Pop Up, а еще и "привести его в порядок". А именно:</p>
50
<ul><li>задать цвета;</li>
50
<ul><li>задать цвета;</li>
51
<li>подключить шрифты;</li>
51
<li>подключить шрифты;</li>
52
<li>расположить информацию и другие элементы окна в положенных местах.</li>
52
<li>расположить информацию и другие элементы окна в положенных местах.</li>
53
</ul><p>Вот пример подключения шрифта с Google Fonts, а также настройки фона тега body:</p>
53
</ul><p>Вот пример подключения шрифта с Google Fonts, а также настройки фона тега body:</p>
54
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap"); body { background: linear-gradient( 137.09deg, #fabc32 2.19%, #f69b31 51.57%, #f16d30 97.86% ); font-family: "Montserrat", sans-serif; }<p>Вот задание стиля контейнеру для корректного отображения в проекте:</p>
54
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap"); body { background: linear-gradient( 137.09deg, #fabc32 2.19%, #f69b31 51.57%, #f16d30 97.86% ); font-family: "Montserrat", sans-serif; }<p>Вот задание стиля контейнеру для корректного отображения в проекте:</p>
55
<p>А вот задание стилей для заголовка страницы:</p>
55
<p>А вот задание стилей для заголовка страницы:</p>
56
<p>Теперь необходимо стилизовать кнопку:</p>
56
<p>Теперь необходимо стилизовать кнопку:</p>
57
<p>Остается привести модальное окно к нормальной форме представления:</p>
57
<p>Остается привести модальное окно к нормальной форме представления:</p>
58
-
<p>Этот процесс необходимо рассмотреть более подробно. Overlay включает в себя стили заднего фона модального окна HTML/CSS. Это необходимо для гарантированного и точного отделения Pop Up от страницы веб-портала. Overlay.show задает свойство display block для отображения фона. Этот класс может присваиваться через JS-код:</p>
58
+
<p>Этот процесс необходи��о рассмотреть более подробно. Overlay включает в себя стили заднего фона модального окна HTML/CSS. Это необходимо для гарантированного и точного отделения Pop Up от страницы веб-портала. Overlay.show задает свойство display block для отображения фона. Этот класс может присваиваться через JS-код:</p>
59
<p>А вот задание стилей для кнопки "Да". Она отвечает за удаление товара из корзины:</p>
59
<p>А вот задание стилей для кнопки "Да". Она отвечает за удаление товара из корзины:</p>
60
<p>Google подчеркивает, что при использовании JS, HTML и CSS одновременно, именно JavaScript-код обеспечивает работоспособность проекта. Основная работа, связанная с созданием модальных окон проделана. Осталось лишь все "активировать".</p>
60
<p>Google подчеркивает, что при использовании JS, HTML и CSS одновременно, именно JavaScript-код обеспечивает работоспособность проекта. Основная работа, связанная с созданием модальных окон проделана. Осталось лишь все "активировать".</p>
61
<h3>Оживление всплывающего окна</h3>
61
<h3>Оживление всплывающего окна</h3>
62
<p>Завершающий этап создания изучаемого элемента - это "оживление" модального окна. Согласно Google, делается это при помощи JS-кода. Вот о каких особенностях рассматриваемого примера необходимо помнить:</p>
62
<p>Завершающий этап создания изучаемого элемента - это "оживление" модального окна. Согласно Google, делается это при помощи JS-кода. Вот о каких особенностях рассматриваемого примера необходимо помнить:</p>
63
<ol><li>Обработчики событий используются для реакции на пользовательские действия.</li>
63
<ol><li>Обработчики событий используются для реакции на пользовательские действия.</li>
64
<li>При клике по "Удалить все товары из корзины" modal-css будет отображаться на странице.</li>
64
<li>При клике по "Удалить все товары из корзины" modal-css будет отображаться на странице.</li>
65
<li>При нажатии на "Нет" рассматриваемый элемент закрывается, а на "Да" - закрывается, но на экране появляется сообщение об успешном удалении товаров.</li>
65
<li>При нажатии на "Нет" рассматриваемый элемент закрывается, а на "Да" - закрывается, но на экране появляется сообщение об успешном удалении товаров.</li>
66
<li>Кнопка "Перейти в каталог" отвечает за сокрытие сообщения об успешном очищении корзины. Google указывает на то, что в реальном Интернет-магазине обычно после удаления товаров клиента сразу переводят обратно в каталог.</li>
66
<li>Кнопка "Перейти в каталог" отвечает за сокрытие сообщения об успешном очищении корзины. Google указывает на то, что в реальном Интернет-магазине обычно после удаления товаров клиента сразу переводят обратно в каталог.</li>
67
</ol><p>Для "активации" PopUp сначала требуется объявить переменные, в которые записываются id для дальнейших операций:</p>
67
</ol><p>Для "активации" PopUp сначала требуется объявить переменные, в которые записываются id для дальнейших операций:</p>
68
<p> Теперь необходимо написать код для оперирования id:</p>
68
<p> Теперь необходимо написать код для оперирования id:</p>
69
<p>При нажатии на deleteBtn необходимо установить CSS-свойство display для компонента с id popup на block. Это требуется для отображения Pop Up. Также требуется добавить класс show к элементу с id overlay - он отвечает за эффект затемнения.</p>
69
<p>При нажатии на deleteBtn необходимо установить CSS-свойство display для компонента с id popup на block. Это требуется для отображения Pop Up. Также требуется добавить класс show к элементу с id overlay - он отвечает за эффект затемнения.</p>
70
<p>Следующий этап - установка обработчика событий по кнопке noBtm. При нажатии на нее CSS-свойство display для popup меняется на none. Это нужно для скрытия всплывающего окна. Требуется удалить класс show для overlay, чтобы избавиться от затемнения:</p>
70
<p>Следующий этап - установка обработчика событий по кнопке noBtm. При нажатии на нее CSS-свойство display для popup меняется на none. Это нужно для скрытия всплывающего окна. Требуется удалить класс show для overlay, чтобы избавиться от затемнения:</p>
71
<p>Аналогичные действия проделываются с обработчиком событий на клик по кнопке yesBtn. При нажатии на нее требуется установить CSS-свойство display для popup на значении none. Поп Ап будет скрыт.</p>
71
<p>Аналогичные действия проделываются с обработчиком событий на клик по кнопке yesBtn. При нажатии на нее требуется установить CSS-свойство display для popup на значении none. Поп Ап будет скрыт.</p>
72
<p>CSS-свойство display для success нужно изменить на block для демонстрации сообщения об успешном удалении товаров. А еще - добавить класс show к overlay:</p>
72
<p>CSS-свойство display для success нужно изменить на block для демонстрации сообщения об успешном удалении товаров. А еще - добавить класс show к overlay:</p>
73
<p>Google подчеркивает, что теперь остается лишь добавить обработчик событий на нажатие по кнопке с id buyBtn:</p>
73
<p>Google подчеркивает, что теперь остается лишь добавить обработчик событий на нажатие по кнопке с id buyBtn:</p>
74
<p>Здесь установлено CSS-свойство display на none у компонента success. Эта операция отвечает за сокрытие сообщения об успешной очистке корзины. Остается снять класс show у overlay, чтобы избавиться от затемнения у модального HTML-окна.</p>
74
<p>Здесь установлено CSS-свойство display на none у компонента success. Эта операция отвечает за сокрытие сообщения об успешной очистке корзины. Остается снять класс show у overlay, чтобы избавиться от затемнения у модального HTML-окна.</p>
75
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>
75
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>
76
76