Как создать в html всплывающие окна. Создаем модальное окно на HTML5 и CSS3
Приветствую, дорогие читатели блога. Сегодня хочу предложить вашему вниманию пошаговую инструкцию с конкретными примерами по созданию красивых окошек при входе на сайт. Попытаюсь расставить все по полочкам.
Первоначально следует понять, что всплывающие окна для сайта нужны для оповещения пользователя о какой-либо важной информации или же получения от него каких-либо данных. На многих современных сайтах, особенно в интернет-магазинах, можно найти небольшие развертывающиеся диалоговые блоки, в которых посетителю ресурса предлагают обратиться в службу поддержки или оценить качество работы проекта.
На некоторых форумах или блогах при входе появляется информационный блок, в котором человеку предлагают подписаться на новости портала, войти в систему или зарегистрироваться в ней. Кроме этого всплывающее окно на html может использоваться для преграждения деятельности пользователя до определенного момента, например, чтобы принудить его отключить блокировку рекламы или заставить зарегистрироваться в системе для продолжения просмотра.
Вариантов использования всплывающих блоков целое множество. В html не предусмотрен встроенный тэг для создания полноценного объекта с настройками анимации и параметров отображения. Однако при помощи языка разметки создается базовая конструкция, которая состоит из тэгов , , , .
Все действия и анимации прописываются в javascript коде, с использованием библиотеки jquery. Чтобы отличать блоки друг от друга к тэгам дописываются метки id="" и class= "" по ним в таблице стилей будут приписываться правила отображения. Вызов блока можно осуществлять по ссылке, при нажатии на кнопку или при первичной загрузке страницы. Эти действия программируются в javascript с использованием источника событий click или onclick.
Чтобы в дальнейшем не возникло вопросов о сокращениях:
- Jq- jquery;
- Js – javascript.
Всего в материале будут рассмотрены 4 примера с использованием разных методов, в том числе с использованием встроенной dialog UI функции в jq. Также имеется 2 варианта на чистом javavscript и html.
Виджет pop-up окна для WordpressНе всем владельцам блогов или магазинов хочется возиться с различными javascript кодами. Для популярных CMS, таким как wordpress, joomla, opencard и т. п. существуют встроенные плагины.
Наиболее популярные плагины wordpress для создания появляющегося окна:
- Contact Form Pop-up;
- Ninja Popup;
- Easy Modal;
- Promotions plugin;
- Ultimited Pop-Ups.
Для Joomla :
- JCE MediaBox;
- Simple Pop-Up
Существует еще целое множество подобных аналогов, но все они выполняют одинаковую функцию. Различается только дизайн меню, в котором работает пользователь.
Как сделать всплывающее окно html с разными стилямиДавайте рассмотрим основные примеры работы с разными способами создания окон и разберем каждый пошагово.
Всплывающее окно при входе на сайтПервоначально лучше рассмотреть пример с использованием html и javascript. Первоначально нужно подключить к странице библиотеку jq. Для этого используйте команду «команда 1» . Ее нужно вставить в самое начало файла, если не выполнить подключение к библиотеке, то нужные fadeIn, fadeOut и т. п. не заработают.
Первоначально создается тэговая конструкция страницы, которая в основном состоит из блоков div. В приведенном примере javascript выводит информацию из разных объектов, поэтому можно вписывать второй div, придав ему параметр iddiv= "box_" после нижнего подчеркивания указывается уникальное число.
div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окноТеперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.