12 бесплатных библиотек и плагинов модальных окон для вашего сайта

События виджета Dialog

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

Событие beforeclose позволяет получить уведомление о том, что пользователь затребовал закрытие диалогового окна. Это может быть вызвано тем, что пользователь нажал клавишу <Esc> (если опция closeOnEscape установлена равной true), щелкнул на кнопке закрытия, находящейся в правом верхнем углу диалогового окна, или щелкнул на кнопке, добавленной с помощью опции buttons.

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

В этом примере определены два элемента input, которые служат для получения имени пользователя и пароля

Однако в данном случае не важно, что введено в этих полях, поскольку после щелчка на кнопке «Войти» всегда отображается модальное диалоговое окно «Неверный пароль»:

При наступлении события open запускается периодически возобновляемый вызов функции, выполняющей обратный отсчет за 15 секунд. Используя событие beforeClose, мы лишаем пользователя возможности закрыть диалоговое окно в течение этого времени. Спустя 15 секунд вызывается метод close, и диалоговое окно автоматически закрывается. Путем совместного использования событий open и beforeClose мы добиваемся того, что пользователь не сможет сразу же повторить попытку ввода другого имени пользователя или пароля (по крайней мере, без повторной загрузки HTML-документа).

Закрытие диалогового окна по кнопке

Думаю вы обратили внимание, что в виджете Dialog есть кнопка «закрыть», отображающаяся в виде крестика в правом верхнем углу диалогового окна:

При клике по ней ожидается закрытие диалогового окна, однако, этого не происходит. Чтобы это исправить вы можете добавить следующий код:

Здесь обрабатывается событие open виджета Dialog, в котором к элементу с классом ui-dialog-titlebar-close (это и есть кнопка) добавляется обработчик события click, где и указывается с помощью метода close, что нужно закрыть окно.

Использование ThickBox

Для создания модального окна (thickbox) нужно сделать две вещи:

1. Подключить скрипт ThickBox в PHP, вызвав функцию add_thickbox().

2. Добавить в HTML ссылку (тег <a>), которая будет открывать модальное окно. Ссылка должна иметь:
   • Класс thickbox: .
   • В URL (атрибут href) нужно добавить дополнительные параметры запроса.

Параметры модального окна

Параметры запроса, которые добавляются в атрибут href ссылки открывающей модальное окно:

width
Ширина модального окна в пикселях.
height
Высота модального окна в пикселях.
TB_iframe

Указываем этот параметр и ставим ему значение true, если нужно загрузить контент указанной в URL ссылки в iframe. Т.е. URL будет выглядеть так: . Так контент http://example.com будем показан в модальном окне, в iframe.
В этом случае не нужно создавать сам элемент модального окна в HTML текущей страницы. ВП сделает все автоматом.

TB_inline

При использовании этого параметра вместо TB_iframe модальное окно покажет заранее созданный HTML элемент с id атрибутом указанным в параметре . Т.е

URL должен выглядеть так: .
В этом случае нужно создать DIV элемент с .

Контент модального окна

Важно чтобы контент внутри элемента находился внутри другого элемента. Выше это тег

.
Так неправильно:

Контент модального окна

Примеры создания модальных окон

#1 inline модальное окно, контент которого берется из текущей страницы

<?php add_thickbox(); ?>

<div id="my-modal-id" style="display:none;">
	 <p>
		  Контент модального окна.
	 </p>
</div>

<a href="/?TB_inline&width=600&height=550&inlineId=my-modal-id" class="thickbox">Открыть модальное окно</a>

В результате получим такое модальное окно

#2 iframe модальное окно, контент которого берется по указанному URL

<?php add_thickbox(); ?>

<a href="http://example.com?TB_iframe=true&width=600&height=550" class="thickbox">Открыть модальное окно</a>

#3 Вызов модального окна через JS функцию

Допустим, мы хотим использовать inline модальное окно, но контент этого окна заменять через AJAX. К сожалению, в API нет события когда модальное окно показывается (оно есть для iframe варианта, то не для inline).

Мы можем использовать JS функцию , она входит в состав апи.

Пример:

<?php add_thickbox(); ?>

<div id="my-modal-id" style="display:none;">
	 <p>
		  Контент модального окна.
	 </p>
</div>

<a href="#" class="modal-init-js" onclick="return window.eduResModalShow(this);">Открыть модальное окно</a>

И теперь дополняющий JS код, где используется tb_show() и создается AJAX запрос.

jQuery(document).ready(function($){

	var $modal = $('#my-modal-id');
	var $modalCont = $modal.find('>*');

	// шаг 1 - показ модального окна и выбор объкта редактирвоания
	window.eduResModalShow = function(that){

		tb_show( 'Заголовок модального окна', '/?TB_inline&inlineId=my-modal-id&width=700&height=500' );

		// AJAX запрос для загрузки контента окна
		$modalCont.html('загружаю...');
		ajaxs( 'edu_results_modal_html', { user_id: 5 }, function(html){
			$modalCont.html(html);
		});

		return false; // для ссылки
	}

});

Заметки

JS код находится в файле

HTML код который создается автоматически

<div id='TB_title'>
	<div id='TB_ajaxWindowTitle'>Заголовок</div>
	<div id='TB_closeAjaxWindow'>
		<button type='button' id='TB_closeWindowButton'><span class='tb-close-icon'></span></button>
	</div>
</div>

<div id='TB_ajaxContent'></div>

Триггером модального окна может быть

HTML тег: <a>, <area> и <input>. Для инициализации каждый тег должен иметь class=»thickbox».

Для <a> URL и параметры указываются в атрибуте href. Для <area> и <input> в атрибуте alt.

// удалено
jQuery( 'body' ).trigger( 'thickbox:removed' );

// закрыто
jQuery( '#TB_window' ).trigger( 'tb_unload' )

// загружено
jQuery( '#TB_window' ).trigger( 'thickbox:iframe:loaded' );

Редактирование файла index.html

Здесь мы прописываем стандартный базовый шаблон. Внутри тега head подключаем 2 остальных файла(, ).  С помощью тега подключаем style.css, c помощью – . Так как наш скрипт написан с использованием библиотеки jQuery, мы прописываем код подключения файла данной библиотеки перед файлом .

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Модальное окно</title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="script.js"></script>
</head>
<body>
</body>
</html>

Внутри тега прописываем код модального окна. Структура кода позволяет создавать несколько модальных окон, которые будут вызываться по уникальному .

<div id="modal1" class="modal_div">
   <span class="modal_close">X</span>
   <!--Здесь размещаем информацию которая будет в модальном окне.-->
</div>

Здесь в мы указываем модального окна, на которое мы будем ссылаться. Класс необходим для указания стилей в файле . Внутри тега тега указываем символ по нажатию на который будет закрываться модальное окно (так же окно может закрываться при нажатии вне области модального окна). Все что вы хотите добавить в модальное окно, должно быть размещено после тега с классом .

Последнее что мы добавляем, это код подложки (затемнение которое появляется на заднем фоне модального окна).

<div id="overlay"></div><!-- Пoдлoжкa, oднa нa всю стрaницу -->

Как работает?

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

.modal {
opacity: 0;
pointer-events: none;
}

.modal:target {
opacity: 1;
pointer-events: auto;
}

Модальное окно имеет две части: контейнер и содержание. В идеале, контейнер должен генерироваться с помощью псевдо элемента, но на момент написания урока данный метод не работает. Контейнер растягивается на всю страницу и притеняет фон с использованием . Большое значение свойства размещает модальное окно поверх страницы.

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
…
}

Содержание позиционируется посередине и «приглаживается» тенями, скругленными углами и градиентом.

Есть две анимации. Одна называется “bounce” («прыжок» — происходит масштабирование до немного большего размера, затем возвращается все к норме). Другая называется “min­imise”, и она действует в обратном направлении. Для них используется комбинация трансформаций прозрачности контейнера.

Простая трансформация прозрачности:

.modal {
…
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}

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

@-webkit-keyframes bounce {
  0% {
        -webkit-transform: scale3d(0.1,0.1,1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
        -webkit-transform: scale3d(1.08,1.08,1);
        -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
        -webkit-transform: scale3d(0.95,0.95,1);
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
        -webkit-transform: scale3d(1,1,1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
        -webkit-transform: scale3d(1,1,1);
  }
  100% {
        -webkit-transform: scale3d(0.1,0.1,1);
  }
}

Для изменения анимации при открытии мы используем каскад и переписываем анимацию по умолчанию с использованием ::

.modal > div {
  …
  -webkit-animation: minimise 500ms linear;
}
.modal:target > div {
  -webkit-animation-name: bounce;
}

Кнопка Закрыть является скрытой ссылкой со стилизованным псевдо-элементом ::, который масштабируется при наведении курсора мыши. Так как мы скрываем оригинальную ссылку, то нужно сделать «прыжок» через изменение состояния псевдо-элемента :. Методы традиционная обрезка, выравнивания текста и скрытия видимости не работают, поэтому используются и несколько специфических стилей для .

.modal a {
…
color: transparent;
}

.modal a:after {
content: 'X';
display: block;
…
}

.modal a:focus:after,
.modal a:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a:focus:after {
outline: 1px solid #000;
}

Редактирование файла style.css.

В файле style.css прописываем стили для нашего модального окна.

.modal_div {
   width: 300px;
   height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
   border-radius: 5px;
   border: 3px #000 solid;
   background: #fff;
   position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
   top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
   left: 50%; /* пoлoвинa экрaнa слевa */
   margin-top: -150px;
   margin-left: -150px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
   display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
   opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
   z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
   padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
   width: 21px;
   height: 21px;
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   display: block;
}
/* Пoдлoжкa */
#overlay {
   z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
   position:fixed; /* всегдa перекрывaет весь сaйт */
   background-color:#000; /* чернaя */
   opacity:0.8; /* нo немнoгo прoзрaчнa */
   -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
   filter:alpha(opacity=80);
   width:100%;
   height:100%; /* рaзмерoм вo весь экрaн */
   top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
   left:0;
   cursor:pointer;
   display:none; /* в oбычнoм сoстoянии её нет) */
}

Полный список опций

$("<div>Hello world<div>").dialog({title: 'Vimeo video'});//
//or
jAlert('Hello!', function(){}, 'My Title');

$('<div>Кто был первым космонавтом?</div>').dialog({
 buttons:{
  'Гагарин': function () {
   jAlert('Вы правы!');
   return false; // не закрывать основное окно
  },
  'Путин': function () {
    jAlert('Вы не правы!')
    return false;
  },
  'Армстронг': function () {
   jAlert('Нет, он был первый на Луне');
  },
  'Закрыть': function() {
    this.dialog('hide')
  },
  'Еще вариант кнопки закрытия': true, // close window
  'Любой текст':$('<a href="http://xdan.ru">Просто ссылка</a>') // custom button
}})

$('<div>Привет</div>').dialog({closeFunction:'hide'})

$('<div>Привет</div>').dialog({showFunction:'show'})

$('<div>Привет</div>').dialog({closeBtn:false})

$('<div>Привет</div>').dialog({closeOnClickOutside:false})

$('<div>Привет</div>').dialog({closeOnEsc:false})

$('<div>Hello</div>').dialog({clickDefaultButtonOnEnter:false})

$('<div>Привет</div>').dialog({zIndex:10000})

$('<div>Hello<.div>').dialog({modal:false})

var $dlg = $('<div>Hello</div>').dialog({shown:false});
// какие-то действия
$dlg.dialog('show');

var $dlg = $('<div>Привет</div>').dialog({removeOnHide:false});
$dlg.dialog('hide');
// какие-то действия
$dlg.dialog('show');

var $dlg = $('<div>Привет</div>').dialog({hideGlobalScrollbar:false});

var $dlg = $('<div></div>').dialog({shown:false, modal:true});
var image = new Image();
image.onload = function() {
 $dlg
  .resize('content', '<img src="'+image.src+'">')
  .resize('show')
  .resize('resize') 
}
image.src = './image.png';

var $dlg = jAlert('Привет', function() {jAlert('I fired')});
//...
$dlg.dialog('ok');

var $dlg = jAlert('Привет', function() {jAlert('Меня нажали')});
//...
$dlg.dialog('hide');

var $dlg = $('<div></div>').dialog({shown:false});
//...
$dlg.dialog('show');

var $dlg = jAlert('Hi', function() {}, 'First Title');
//...
$dlg.dialog('title', 'Second Title');

var $dlg = jAlert('', function() {}, 'First Title');
//...
$dlg.dialog('content', 'Hi<br>'.repeat(100));

function (msg, callback, title){...}

jAlert('Привет мир', function (){jAlert(111)},'Title')

function (msg, callback, title){...}

jConfirm('Вы уверены?', function (){jAlert(111)},'Title')

function (msg, default_value, callback, title){...}

jPrompt('Введите свое имя?','Иван', function (){jAlert(111)},'Ваше имя')

function (title, with_close, not_close_on_click){...}

var $dlg = jWait('Please wait!', false, true);
$.get('index.php',function () {
	$dlg.dialog('hide');
})

Рассказать друзьям

Всплывающее окно на uCoz

На все сайты uCoz уже автоматически подключена библиотека jquery, с помощью которой Вы можете создавать Ajax окна. Всплывающее окно на uCoz выводит простое текстовое сообщение. Скрипт также является вариантом простой ссылки с подключением внутри нее JavaScript.

<a href=»javascript://» onclick=»new _uWnd(‘ajax’,’Всплывающее окно на uCoz’,’300′,’100′,{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},’Текст сообщения’)»> Текст на который нужно нажать, чтобы появилось окно </a>

Текст сообщения – собственно сам текст, который будет отображаться в окне (контент). Если Вы хотите вместо обыкновенного текста вставить HTML код, то в данном случае все привычные для HTML языка кавычки ” (двойные или одинарные) нужно заменить на \’ (косая с одинарной кавычкой). Хотя все скрипты найденные мною в интернете написаны без такого изменения, на моих сайтах работает только так.

Вот пример кода всплывающего окна, где вместо текстового сообщения вставлена ссылка на само вплывающее окно, то есть тут всплывающее окно создано в отдельном html файле, а в коде размещена только ссылка на него:

<a href=»javascript://» onclick=»new _uWnd(‘ajax’,’Всплывающее окно на uCoz’,’300′,’100′,{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},'<iframe src=\’CCЫЛКА_НА_ЗАРАНЕЕ_СОЗДАННОЕ_ОКНО\’ style=\’width:100%; height:100%; margin:0px; border:0px;avtosize:1;\’></iframe>’)»> Текст на который нужно нажать, чтобы появилось окно </a>

Осторожнее с модальными окнами, вызываемыми системой

Есть два типа модальных окон: вызываемые пользователем и вызываемые системой:

• Те, что вызваны пользователем, появляются на экране лишь тогда, когда человек сам этого хочет (например, нажимает на кнопку). В этом случае пользователь понимает, почему появляется окно.
• Те окна, вызываемые системой, которые лишь прерывают задачу, выполняемую человеком. Одна из самых больших проблем с таким типом модальности заключается в том, что эти окна отвлекают пользователей от того, что они делали до появления окна. Человек может даже не понять, почему оно всплыло.

Дизайнеры обычно используют такие окна в рекламных целях. Такие окна прерывают пользователя и заставляют его выполнить какое-либо определенное действие. “Незваные” окна часто производят плохое впечатление на пользователей — люди инстинктивно ищут кнопку “закрыть”. Такие окна считаются раздражающими и неуместными.

Внезапное модальное окно с формой подписки на рассылку

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

Создание всплывающих окон в WordPress

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

2. После активации плагина перейдите в Pupup Maker -> Add New.

3.  В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:

• 1) Указываем название модального окна. Это название пользователю видно не будет.
• 2) Заглавие модального окна.
• 3) Отмечаем галочкой страницы, на которых будем использовать всплывающее окно. Если указываем «On Entrie Site» — модальное окно можно использовать на всех страницах и записях сайта.
• 4) Наполнение всплывающего окна. Сюда пишем текст, вставляем изображения и т.п. В общем, делаем наполнение по желанию. В нашем примере я вставил фрейм видеозаписи с youtube.
• 5) Указываем размер модального окна. Размер можно указать как в процентах, так и в пикселях. Значение «Auto» — автоматически подбирает размер модального окна. В случае добавления видеозаписи это лучший вариант.

• 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
• 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
• Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
• 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
• 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.

• 11) Настройки закрытия модального окна. Click Overlay to Close — закрытие модального окна при нажатии мимо него. Press ESC to Close — закрытие модального окна клавишей Esc. Press F4 to Close — закрытие клавишей F4. Я отмечаю все пункты, дабы не злить пользователей сайта и упростить возможность закрытия всплывающего окна
• 12) Настройки автоматического открытия модального окна. В нашем примере его использовать не будем.

4. После того как мы выполнили настройки, нажимаем кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.