Всплывающее окно на HTML и CSS
Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().
Всплывающее окно
Первым шагом создания всплывающего окна является создание элемента <div> (или любого другого элемента) и его оформление:
Этот <div> и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:
Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента <div> сменится с none на block .
Теперь надо расположить <div> посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент <div> внутри элемента <a>:
Затем мы позиционируем элемент <a> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:
У элемента <div> убираем display: none; (он больше не нужен, так как скрываем мы теперь <a> ). В итоге родительский <a> выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.
На этом создание простого всплывающего окна закончено.
Модальное окно
Для создания всплывающего модального окна, берём элемент <div> , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему <div> и оформив:
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный <div> :
Позиционируем родительский <div> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.
У дочернего <div> убираем display: none; (он больше не нужен, так как родительский <div> будет скрывать всё, что находится внутри него). В итоге родительский <div> теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
Всплывающие сообщения для сайта на чистом JavaScript
Всплывающие сообщения – это ненавязчивый способ показа сообщений для пользователя. Они позволяют отображать уведомления пользователю заметным образом и не мешая при этом его взаимодействию с сайтом или веб-приложением.
Проект, рассматриваемый в рамках этой статьи, расположен на Github по адресу: https://github.com/itchief/ui-components/tree/master/toast
Он написан на чистом JavaScript без использования сторонних библиотек.
По умолчанию всплывающие сообщения отображаются в правом верхнем углу. При этом они могут выводиться как с заголовком, так и без него.
Подключение и использование
Компонент для показа всплывающих уведомлений состоит из 2 файлов: «toast.css» и «toast.js». Преимуществом данной библиотеки состоит в том, что она имеет очень маленький размер («toast.min.js» немного больше 1Кбайта). В отличие от библиотеки jGrowl эти сообщения не требуют библиотеку jQuery, что для многих сайтов очень важно.
Подключение компонента осуществляется посредством:
- включения на страницу стилей «toast.min.css»;
- добавления JavaScript кода «toast.js».
Вывод всплывающего сообщения на страницу осуществляется посредством создания экземпляра объекта Toast :
Если нужно создать сообщение без заголовка, то нужно просто ключу title установить значение false :
Подробное описание
Создание HTML кода всплывающих сообщений как с заголовком, так и без него выполняется в JavaScript. Целью является создание следующей структуры:
HTML код сообщений простой. Он состоит из элемента с классом toast , в котором в зависимости от типа уведомления расположены два или три элемента:
- <div> с классом toast__header — заголовок;
- <div> с классом toast__body — элемент, в котором выводится само сообщение;
- <button> с классом toast__close — кнопка, для закрытия сообщения.
С помощью классов в CSS добавляются стили к этим элементам:
Класс toast__close ещё используется в обработчике события click . При нажатию на эту кнопку выполняется закрытие сообщения.
После того как JavaScript добавляет HTML код всплывающего сообщения на страницу, оно не отображается, т.к. по умолчанию оно имеет display: none . Его показ осуществляется после того, как к нему добавляется класс toast_show .
Скрытие сообщения выполняется путём удаления класса toast_show .
Задание темы осуществляется посредством добавления класса.
Например, тема primary устанавливается так:
Помещение элементов .toast выполняется в контейнер .toast-container . Его создание тоже осуществляется с помощью JavaScript, но только в том случае, если его нет на странице.
Данный элемент по умолчанию располагается в правом верхнем углу страницы и имеет ширину 270 пикселей. Если нужно расположить в другом месте, то измените стили.
Как сделать — Предупреждающие сообщения, Оповещения
Узнайте, как создавать предупреждающие сообщения с помощью CSS.
Оповещения
Предупреждающие сообщения могут быть использованы для уведомления пользователя о чем-то особенном: опасность, успех, информация или предупреждение.
Создание оповещения
Шаг 1) добавить HTML:
Пример
Если вы хотите закрыть оповещение, добавьте элемент <span> с атрибутом, onclick который говорит: «при нажатии на меня скрывается мой родительский элемент», который является контейнером <div> (класс = «Alert»).
Совет: Используйте объект HTML » × » для создания буквы «x».
Шаг 2) добавить CSS:
Стиль окно оповещения и кнопка Закрыть:
Пример
/* The alert message box */
.alert <
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
>
/* The close button */
.closebtn <
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
>
/* When moving the mouse over the close button */
.closebtn:hover <
color: black;
>
Много оповещений
Если на странице имеется много оповещений, можно добавить следующий сценарий для закрытия различных оповещений без использования атрибута OnClick для каждого элемента <span>.
И, если вы хотите, чтобы оповещения медленно исчезают, когда вы нажимаете на них, добавить opacity и transition к alert классу:
Пример
<style>
.alert <
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
>
</style>