Приветствую, дорогие читатели блога. Сегодня хочу предложить вашему вниманию пошаговую инструкцию с конкретными примерами по созданию красивых окошек при входе на сайт. Попытаюсь расставить все по полочкам.
Первоначально следует понять, что всплывающие окна для сайта нужны для оповещения пользователя о какой-либо важной информации или же получения от него каких-либо данных. На многих современных сайтах, особенно в интернет-магазинах, можно найти небольшие развертывающиеся диалоговые блоки, в которых посетителю ресурса предлагают обратиться в службу поддержки или оценить качество работы проекта.
На некоторых форумах или блогах при входе появляется информационный блок, в котором человеку предлагают подписаться на новости портала, войти в систему или зарегистрироваться в ней. Кроме этого всплывающее окно на html может использоваться для преграждения деятельности пользователя до определенного момента, например, чтобы принудить его отключить блокировку рекламы или заставить зарегистрироваться в системе для продолжения просмотра.
Вариантов использования всплывающих блоков целое множество. В html не предусмотрен встроенный тэг для создания полноценного объекта с настройками анимации и параметров отображения. Однако при помощи языка разметки создается базовая конструкция, которая состоит из тэгов <div>, <button>, <a>, <dialog>.
Все действия и анимации прописываются в 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_” после нижнего подчеркивания указывается уникальное число.
<html>
<meta charset=”UTF-8″ />
<head>
<script src=”http://code.jquery.com/jquery-1.11.1.js”
<title>Всплывающие модальные окна (popup) с помощью CSS и JS</title>
</head>
<body>
<div align=”center” class=”fond”>
<div id=”myfond_gris” opendiv=””></div>
<div align=”center” style=”padding-top:35px;”>
<div style=”background-color:#00a096;” iddiv=”box_1″ class=”mymagicoverbox”>
Нажми на меня !
</div>
<div id=”box_1″ class=”mymagicoverbox_fenetre” style=”left:-225px; width:450px;”>
Заголовок окна
<div class=”mymagicoverbox_fenetreinterieur” style=”height:150px; “>
<div style=”width:100px” align=”center” class=”mymagicoverbox_fermer”>НЕТ</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style=”padding-top:35px;” align=”center”>
</div>
</div>
В показанном примере создаются базовые кнопки и сообщения. Для этого пишутся тэги <div>. В начале кода подключайте необходимые файлы и библиотеки.
<script src=”script.js”></script> – применяется для подключения jq библиотеке с необходимыми функциями.
Теги <div> – являются объектами страницы, благодаря ним создаются все кнопки и сообщения. К ним приписаны параметры style= “” для локального вписывания нужных стилей.
Id= “” и class= “”- параметры, которые позволяют дать объектам имя для отличия их друг от друга, в дальнейшем название, вписанное в кавычки, используется при создании стилей оформления.
Iddiv =””- обозначает имя переменной, которая в дальнейшем будет использоваться в jquery скрипте.
Остальные тэги и параметры в основном имеют украшающую функцию, придавая странице приятный для просматривания вид. Их можно убрать, от этого поменяется внешнее представление страницы. Также их можно прописать в стилях css при желании.
Стилевое оформление может быть абсолютно разным, оно влияет только на графические параметры отображения элементов страницы. В примере использовался следующий css код.
<style>
.fond {
position:absolute;
padding-top:45px;
top:0;
left:0;
right:0;
bottom:0;
background-color:#f8b334;
}
.mymagicoverbox {
display:inline-block;
color:#ffffff;
padding:10px;
margin:10px;
cursor:pointer;
font-weight:300;
font-family:’Roboto’;
}
.mymagicoverbox_fenetre {
z-index:9999;
position:fixed;
margin-left:50%;
top:100px;
text-align:center;
display:none;
padding:5px;
background-color:#ffffff;
color:#97BF0D;
font-style:normal;
font-size:20px;
font-weight:300;
font-family:’Roboto’;
}
.mymagicoverbox_fenetreinterieur {
text-align:center;
overflow:auto;
padding:10px;
background-color:#ffffff;
color:#666666;
font-weight:400;
font-family:’Roboto’;
font-size:17px;
border-top:1px solid #e7e7e7;
margin-top:10px
}
.mymagicoverbox_fermer {
color:#CB2025;
cursor:pointer;
font-weight:400;
font-size:14px;
font-style:normal
font-family:’Roboto’;
}
#myfond_gris {
display: none;
background-color:#000000;
opacity:0.7;
width:100%;
height:100%;
z-index:9998;
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
Самую важную функцию открытия и закрытия блоков играет jq код, который дословно можно расшифровать: «При нажатии на кнопку с тэгом class=«mymagicoverbox» в течение секунды выводи блок, с необходимым iddiv». Вторая часть используется для скрытия элементов.
$(document).ready(function(){
$(“.mymagicoverbox”).click(function()
{
$(‘#myfond_gris’).fadeIn(500);
var iddiv = $(this).attr(“iddiv”);
$(‘#’+iddiv).fadeIn(500);
$(‘#myfond_gris’).attr(‘opendiv’,iddiv);
return false;
});
$(‘#myfond_gris, .mymagicoverbox_fermer’).click(function()
{
var iddiv = $(“#myfond_gris”).attr(‘opendiv’);
$(‘#myfond_gris’).fadeOut(300);
$(‘#’+iddiv).fadeOut(300);
});
});
На этом код заканчивается. Он отлично подходит для демонстрации того, как происходит работа скриптов на странице, в примере применяется довольно много строк на странице, что приносить дискомфорт при работе с документом.
Полноценный файл в сборке выглядит так.
$(document).ready(function(){
$(“.mymagicoverbox”).click(function()
{
$(‘#myfond_gris’).fadeIn(500);
var iddiv = $(this).attr(“iddiv”);
$(‘#’+iddiv).fadeIn(500);
$(‘#myfond_gris’).attr(‘opendiv’,iddiv);
return false;
});
$(‘#myfond_gris, .mymagicoverbox_fermer’).click(function()
{
var iddiv = $(“#myfond_gris”).attr(‘opendiv’);
$(‘#myfond_gris’).fadeOut(300);
$(‘#’+iddiv).fadeOut(300);
});
});
Подобным вариантом кода не пользуются на современных Интернет-ресурсах, так как файл длинный и неудобный для изменения. Для вставки на используемый интернет-магазин предпочитают использовать jquery. Но на данном примере подробно показано, что можно создать красивый анимированный, раскрывающийся, информационный блок без вспомогательных гаджетов типа jq UI.
Конечный результат выглядит следующим образом:
Pop-up окна для сайта на jquery
На большинстве современных сетевых магазинов, блогов, форумах и т. п. всплывающие окна имеют привлекательный вид и занимают в коде немного места. Чтобы упростить жизнь программистам был создан виджет под названием dialog. Он используется в сочетании с jquery кодом, так как для вызова функций требуется эта библиотека.
Первоначально требуется подключить необходимые библиотеки из интернета или локального хранилища. В приведенном случае это необходимо для jquery и библиотеки jq UI.. Для этого в начале документа пропишите:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=”//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js”></script>
Если имеется желание, то можно скачать набор виджетов с сайта разработчика с различными встроенными css. Также можно самостоятельно корректировать таблицу стилей после ее загрузки.
Если не хочется создавать собственные стили, то используйте общедоступные ресурсы:
<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css”>
Потребуется следующая основа:
<meta charset=”utf-8″>
<title>jQuery UI</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=”//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=”http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css”>
<div id=”dialog” title=”Диалоговое окно”>
Содержимое, которое будет отображаться в диалоговом окне. К этому <b>содержимому</b> могут применяться <em>стили</em>.
</div>
<button id=”B_open”>Показать диалоговое окно</button>
Главное создать блок <div> или <p> с уникальным именем, именно он будет отображаться при выводе текста, вся информация из блока будет выводиться в сообщении. Также потребуется объект, при нажатии на который осуществляется вывод информации на экран пользователя, для этого используют ссылку <a> или кнопку <button>.
Чтобы вызвать функцию dialog потребуется скрипт на jquery. В скобках после знака доллара записывается уникальное имя блока div через решетку, например, $(#OpenButton) далее идет описание объекта, действия, функции.
$(‘#B_open’).button().click(function(e) { $(‘#dialog’).dialog(“open”) });
Конструкция dialog(“метод”) применяется для кнопок, чтобы они выполняли какое-либо действие, связанное с виджетом. Кроме метода «open» при нажатии на элемент можно выполнить следующие действия (название метода и как он влияет на виджет):
- destroy – удалить;
- проявить;
- isOpen– проверить, отображается ли объект;
- enable – включить;
- disable – выключить;
- close – закрыть;
- изменить опции.
В дальнейшем эти методы можно использовать в параметрах buttons, пример с использованием option и close в данном свойстве.
buttons: [
{text: “закрыть”, click: function() {$(this).dialog(“close”)}}, // закрыть диалоговое окно
{text: “изменить размер”, click: function() {
$(this).dialog(“option”, “width”, 1000), //изменить ширину
$(this).dialog(“option”, “height”, 1000) }}, //изменить длину
{text: “запретить изменение размеров”, click: function() {$(this).dialog(“option”, “resizable”, false)}, }, //запретить изменение размеров
{text: “запретить перемещение”, click: function() {$(this).dialog(“option”, “draggable”, false)}} //запретить перемещение
]
Метод dialog() имеет простую структуру и множество свойств для настройки вывода окна и его поведении при взаимодействии с пользователем.
дополнительные кнопки | buttons |
автопоявление при открытии страницы | autoOpen |
возможность перемещения объекта | draggable |
разрешение изменять размер | resizable |
позиция блока при появлении | position |
высота и ширина виджета | width (ширина) height (высота) |
тип анимации скрытия и показа | show (анимация раскрытия) hide (анимация скрытия) |
блокировка остальных действий на сайте, затемнение заднего фона | modal |
называние | title |
разрешение закрытия при нажатии кнопки esc | closeOnEscape |
возможность перемещения на передний план (если используется 2 и более блоков вызванных через функцию dialog) | stack |
Для назначения свойств используется конструкция «свойство: значение». Если передается два значения, например для свойства позиции, то конструкция выглядит следующим образом: «свойство: [«значение 1», «значение 2»]».
Значения должны иметь одинаковый тип данных:
- [«строковая, строковая»]
- [число, число]
Чтобы понять особенности использования синтаксиса рассмотрите пример использования свойств для виджета:
$(function() {
$(‘#dialog’).dialog({
autoOpen: false, //автозапуск после открытия страницы
resizable: true, //может изменять размер
position: [100, 500], //позиционирование
height: 500, //длина
width: 600, //ширина
modal: true, //затемнение за окном и блокировка остальных действий
resizable: true, // разрешение изменения размеров окна
closeOnEscape: true, // закрытие по клавише esc
draggable: true, //разрешить перемещение по странице
stack: true, //возможность перемещения на передний план
show: ‘puff’, //тип анимации открытия
hide: 1000, //скорость анимации скрытия
buttons: [ //создание дополнительных кнопок
{text: “закрыть”, click: function() {$(this).dialog(“close”)}}, // закрыть диалоговое окно
{text: “изменить размер”, click: function() {
$(this).dialog(“option”, “width”, 1000), // изменить ширину
$(this).dialog(“option”, “height”, 1000) }}, //изменить длину
{text: “запретить изменение размеров”, click: function() {$(this).dialog(“option”, “resizable”, false)}, }, //запретить изменение размеров
{text: “запретить перемещение”, click: function() {$(this).dialog(“option”, “draggable”, false)}} //запретить перемещение
]
});
Этот код и является полноценным описанием jquery для dialog UI. Необязательно использовать все опции, при их отсутствии в коде в функцию передается значение, установленное разработчиком по умолчанию.
Полностью оконченный документ выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>jQuery UI</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css”>
<script type=”text/javascript”>
$(function() {
$(‘#dialog’).dialog({
autoOpen: false, //автозапуск после открытия страницы
resizable: true, //может изменять размер
position: [100, 500], //позиционирование
height: 500, //длина
width: 600, //ширина
modal: true, //затемнение за окном и блокировка остальных действий
resizable: true, // разрешение изменения размеров окна
closeOnEscape: true, // закрытие по клавише esc
draggable: true, //разрешить перемещение по странице
stack: true, //возможность перемещения на передний план
show: ‘puff’, //тип анимации открытия
hide: 1000, //скорость анимации скрытия
buttons: [ //создание дополнительных кнопок
{text: “закрыть”, click: function() {$(this).dialog(“close”)}}, // закрыть диалоговое окно
{text: “изменить размер”, click: function() {
$(this).dialog(“option”, “width”, 1000), // изменить ширину
$(this).dialog(“option”, “height”, 1000) }}, //изменить длину
{text: “запретить изменение размеров”, click: function() {$(this).dialog(“option”, “resizable”, false)}, }, //запретить изменение размеров
{text: “запретить перемещение”, click: function() {$(this).dialog(“option”, “draggable”, false)}} //запретить перемещение
]
});
$(‘#B_open’).button().click(function(e) {
$(‘#dialog’).dialog(“open”)
});
});
</script>
</head>
<body>
<p id=”dialog” title=”Диалоговое окно”>
Информация, которая выводится в диалоговом окне. Для этого содержимого <b>могут</b> применяться <em>стили</em> <i><b>какие, только пожелаете</i></b>. Информация может записываться в тэгах <p>, <a> <div>, и любых других, в которых можно отобразить текст.
</p>
<button id=”B_open”>Показать диалоговое окно</button>
</body>
</html>
В примере использовались общедоступные css и js на серверах google. Если имеется желание, то все файлы можно скачать на сервер и изменять их на свое усмотрение.
Jq UI удобно использовать из-за его понятной конструкции, множеству доступных опций и методов. Также на сайте разработчика предоставляются различные css стили для оформления элементов. Если имеется желание, то всем объектам можно прописать стили, используя bootstrap. Или же можно доработать официальные стили, изменив значение в параметрах css.
В приведенном примере все коды содержатся в единой сборке, при разработке на сайте удобней разделить js, css и html по разным файлам. Это значительно удобнее при доработке, так как не потребуется просматривать множество различных скриптов на одной странице.
Поп-ап окно для сайта с использованием html5 и javascript
Современные языки программирования javascript и html 5 позволяет создать всплывающие блоки без использования jq и дополнительных плагинов. Чтобы заменить $ (основной элемент в jquery) используется функция querySelector.
Первоначально создается html основа в виде объекта, который будет выводить информацию для пользователя. Для этих целей используется тэг <dialog>. Если его создать без кнопок запуска, то он не будет отображаться. Поэтому создаем кнопки скрыть, показать.
Для этого используются тэги <buttons>. Чтобы они были различны между собой, каждому из элементов задаем уникальное значение через id=””. Оно в дальнейшем будет использоваться в javascript.
document.querySelector(‘#show’).onclick = function() {
dialog.show();
};
document.querySelector(‘#close’).onclick = function() {
dialog.close();
};
Далее идет строка для CSS:
dialog {
border-radius:10px;
border: 5px solid #35C4C1;
background-color: #50AEAC ;
position: absolute;
top: 100px;
left: center;
}
.dialog_text {
text-decoration-color: #E6ECEC;
}
button {
background-color: #1085A6 ;
border: 3px solid #C023BB;
position: center;
};
Если имеется желание придать модальность отображаемой информации (задний фон затемняется) вместо dialog.show(); нужно использовать dialog.showModal();
Так как в javascript отсутствует встроенная анимация для show и hide, то действия отображаются резко и некрасиво. Подобные особенности нужно отдельно регулировать при помощи css и js.
Всплывающее окно при нажатии на ссылку или текст
Не всегда нужно создавать красивое окно с множеством декоративных стилей и анимаций. В некоторых случаях пользователю достаточно вывести предупредительное окно с важной информацией. Для этого в javascript предусмотрена функция alert. Запускается она элементарно:
<a href=”” onclick=”alert(‘предупреждение для пользователя’);return false”>ссылка запуска alert</a>
Чтобы ее использовать при нажатии на кнопку или ссылку потребуется в тэг <a> вписать дополнительные параметры. Главную задачу здесь выполняет событие onclick. В его значении нужно указать, что именно будет запускаться. В примере таковым является сообщение alert(«предупреждение с сайта»).
В тэге <a> через onclick можно вызывать всплывающее окно html. Для этого нужно предварительно создать переменную, в которую записана функция с отображением всплывающего предупреждения.
Вызов предупреждения через ссылку
Чтобы подобным вариантом отобразить необходимую информацию можно в значении onclick использовать функцию отображения. Код выглядит следующим образом:
<dialog id=”dialog”>Информация в диалоговом окне</dialog>
<a href=”#” onclick=”dialog.show();”>ссылка запуска всплывающего окна</a>
<script>
var dialog = document.querySelector(‘dialog’);
</script>
После прочтения материала пользователь сумеет самостоятельно сделать всплывающее окно с красивой анимацией. При этом он может использовать несколько различных способов для осуществления цели: чистый javascript, jquery UI и универсальные дополнения для CMS.
Надеюсь, материал был весьма полезен, и вы поделитесь им с помощью репоста в социальных сетях. До скорых встреч и не забываем подписываться на рассылку. Всех благ.
Возможно будет интересно почитать:
С уважением, Галиулин Руслан.