Как сделать всплывающее окно для сайта на html, jquery, javascript или плагином

Приветствую, дорогие читатели блога. Сегодня хочу предложить вашему вниманию пошаговую инструкцию с конкретными примерами по созданию красивых окошек при входе на сайт. Попытаюсь расставить все по полочкам.

Как сделать всплывающее окно для сайта на html, jquery, javascript или плагином

Первоначально следует понять, что всплывающие окна для сайта нужны для оповещения пользователя о какой-либо важной информации или же получения от него каких-либо данных. На многих современных сайтах, особенно в интернет-магазинах, можно найти небольшие развертывающиеся диалоговые блоки,  в которых посетителю ресурса предлагают обратиться в службу поддержки  или оценить качество работы проекта.

На некоторых форумах или блогах при входе появляется информационный блок, в котором человеку предлагают подписаться на новости портала, войти в систему или зарегистрироваться в ней. Кроме этого всплывающее окно на 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.

Конечный результат выглядит следующим образом:

Как сделать всплывающее окно для сайта на html, jquery, javascript или плагином

4

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
разрешение закрытия при нажатии кнопки esccloseOnEscape
возможность перемещения на передний план (если используется 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>. Информация может записываться в тэгах &lt;p&gt;, &lt;a&gt; &lt;div&gt;, и любых других, в которых можно отобразить текст.
</p>
<button id=”B_open”>Показать диалоговое окно</button>
</body>
</html>

 

В примере использовались общедоступные css и js на серверах google. Если имеется желание, то все файлы можно скачать на сервер и изменять их на свое усмотрение.

5

6

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.

8

Всплывающее окно при нажатии на ссылку или текст

Не всегда нужно создавать красивое окно с множеством декоративных стилей и анимаций. В некоторых случаях пользователю достаточно вывести предупредительное окно с важной информацией.  Для этого в 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.

Надеюсь, материал был весьма полезен, и вы поделитесь им с помощью репоста в социальных сетях. До скорых встреч и не забываем подписываться на рассылку. Всех благ.

Возможно будет интересно почитать:

С уважением, Галиулин Руслан.

Рейтинг
( 1 оценка, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: