Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert() .
Всплывающее окно
Первым шагом создания всплывающего окна является создание элемента
Этот
Используя псевдо-класс:target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента
Теперь надо расположить
#okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*позиционируем и центрируем*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент
Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:
У элемента
На этом создание простого всплывающего окна закончено.
Модальное окно
Для создания всплывающего модального окна, берём элемент
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему
Закрыть окно
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный
Закрыть окно
Позиционируем родительский
У дочернего
Закрыть окно
Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).
Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.
Куда вставить в DOM?
Обычно, я помещаю его перед закрывающим тэгом body.