Модальное окно на jquery: Модальное окно на затемненном фоне jQuery

17.06.2021 alexxlab

Содержание

Модальное окно на jQuery с формой отправки письма | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Однажды я уже писал о модальных окнах, то была статья о создании окон для WordPress с помощью плагина Easy Modal Lite. В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Что нам понадобится?! не так уж и много:

библиотека jQuery;
плагин fancybox;
сценарий PHP для отправки сообщения.

Разметка

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

Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:

1	<a href=»#inline»>Отправить сообщение</a>

Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:

2
3
4
5
6
7
8
9
10
11
12
13

div>
h3>Отправка сообщения/h3>

<form name=»contact» action=»#» method=»post»>
<label for=»email»>Ваш E-mail</label>
<input type=»email» name=»email»>
<br>
<label for=»msg»>Введите сообщение</label>
<textarea name=»msg»></textarea>

<button>Отправить E-mail</button>
</form>
</div>

Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.

Изначально форма скрыта:

1	#inline { display: none; }

Стили формы

Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

.txt {
display: inline-block;
color: #676767;
width: 420px;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}

.txtarea {
display: block;
resize: none;
color: #676767;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
width: 500px;
height: 150px;

border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}

.txt:focus,
.txtarea:focus {
border-style: solid;
border-color: #bababa;
color: #444;
}

input.error,
textarea.error {
border-color: #973d3d;
border-style: solid;
background: #f0bebe;
color: #a35959;
}

input.error:focus,
textarea.error:focus {
border-color: #973d3d;
color: #a35959;
}

Для оформления кнопки «Отправить» будем использовать линейный градиент.:

1
2
3
4
5
6
7
8
9
10
11
12

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#send {
color: #dee5f0;
display: block;
cursor: pointer;
padding: 5px 11px;
font-size: 1.2em;
border: solid 1px #224983;
border-radius: 5px;
background: #1e4c99;
background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d));
background: -moz-linear-gradient(top, #2f52b7, #0e3a7d);
background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);
background: -o-linear-gradient(top, #2f52b7, #0e3a7d);

background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);
background: linear-gradient(top, #2f52b7, #0e3a7d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#2f52b7′, endColorstr=’#0e3a7d’);
}

#send:hover {
background: #183d80;
background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b));
background: -moz-linear-gradient(top, #284f9d, #0c2b6b);
background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);
background: -o-linear-gradient(top, #284f9d, #0c2b6b);
background: -ms-linear-gradient(top, #284f9d, #0c2b6b);

background: linear-gradient(top, #284f9d, #0c2b6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#284f9d’, endColorstr=’#0c2b6b’);
}

#send:active {
color: #8c9dc0;
background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7));
background: -moz-linear-gradient(top, #0e387d, #2f55b7);
background: -webkit-linear-gradient(top, #0e387d, #2f55b7);
background: -o-linear-gradient(top, #0e387d, #2f55b7);
background: -ms-linear-gradient(top, #0e387d, #2f55b7);
background: linear-gradient(top, #0e387d, #2f55b7);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0e387d’, endColorstr=’#2f55b7′);
}

Fancybox

Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:

1
2
3

$(document).ready(function() {
$(«.modalbox»).fancybox();
$(«#contact»).submit(function() { return false; });

Также отменяем стандартное действие формы submit (отправить), это позволит нам использовать свой собственный ajax запрос. При вызове метода я не использовал не одного параметра, оставил все значения по умолчанию. Однако о них стоит упомянуть:

Название	Описание
padding	Отступы до содержимого в окне (По-умолчанию 15px)
margin	Расстояние от краев браузера до окна (По-умолчанию 20px)
width	Ширина по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 800px)
height	Высота по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 600px)
minWidth	Минимальная ширина окна (По-умолчанию 100px)
minHeight	Минимальная высота окна (По-умолчанию 100px)
maxWidth	Максимальная ширина окна (По-умолчанию 9999px)
maxHeight	Максимальная высота окна (По-умолчанию 9999px)
autoSize	Если «true», то autoHeight и autoWidth также «true» (По-умолчанию true)
autoHeight	Если установлен «true», для «inline», «AJAX» и «HTML» содержимого высота определяется автоматически (По-умолчанию false)
autoWidth	Если установлен «true», для «inline», «AJAX» и «HTML» содержимого ширина определяется автоматически (По-умолчанию false)
autoResize	Если установлено «true», то размер содержимого будет изменяться вместе с изменением окна
autoCenter	Если установлено «true», то содержимое будет по центру
fitToView	Если установлено «true», то окно будет подстроено под размер браузера перед открытием (По-умолчанию true)
aspectRatio	Если установлено «true», то изменение размера ограничено соотношением сторон (По-умолчанию false)
topRatio	Вертикальное позиционирование. Если установлено 0.5 то расстояние до верха и низа окна браузера будет одинаково. Если 0 то модальное окно будет сверху (По-умолчанию 0.5)
leftRatio	Аналогичный параметр только для горизонтального позиционирования (По-умолчанию 0.5)
scrolling	Показывать полосы прокрутки. Может быть установлено ‘auto’, ‘yes’, ‘no’ или ‘visible’ (По-умолчанию auto)
wrapCSS	Настраиваемый класс CSS
arrows	Если установлено «true», то будут отображаться навигационные кнопки (По-умолчанию true)
closeBtn	Если установлено «true», то кнопка закрыть окно будет отображаться (По-умолчанию true)
closeClick	Если «true», то при нажатии на содержимое окно закроется (По-умолчанию false)
nextClick	Если установлено «true», то в галерее при нажатии на содержимое будет переход к следующей картинке (По-умолчанию false)
mouseWheel	Если «true», то галерею можно прокручивать с помощью колесика мыши (По-умолчанию true)
autoPlay	Если «true», то при открытии первого элемента галерее начнется слайдшоу (По-умолчанию false)
playSpeed	Скорость слайдшоу (По-умолчанию 3000 миллисекунд)
preload	Количество картинок миниатюр под основным изображением (По-умолчанию 3)
modal	Если «true», навигация и кнопка закрытия будет отключена (По-умолчанию false)
loop	Если «true», то в галерее после достижения конца, начнется заново (По-умолчанию true)
ajax	Опция для ajax запроса
iframe	Опция для управления iframe
swf	Опция для управления swf содержимым
keys	Можно определить клавиши для навигации по слайдшоу
direction	Направление навигации
scrollOutside	Если установлено «true», то сценарий будет избегать создания полос прокрутки (По-умолчанию true)
index	Переопределяет индекс группы начала (По-умолчанию 0)
type	Переопределяет тип содержимого. Поддерживаемые типы «image», «inline», «AJAX», «IFRAME», «SWF» и «HTML» (По-умолчанию null)
href	Переопределяет ссылкой источник контента (По-умолчанию null)
content	Переопределяет содержимое, которое будет отображаться (По-умолчанию null)
title	Переопределяет заголовок, можно установить любой HTML (По-умолчанию null)
tpl	Объект, содержащий различные шаблоны
openEffect / closeEffect / nextEffect / prevEffect	Эффект анимации для действий, возможны значения ‘fade’, ‘fade’, ‘elastic’, ‘elastic’
openSpeed / closeSpeed / nextSpeed / prevSpeed	Скорость анимации (По-умолчанию 250)
openEasing / closeEasing / nextEasing / prevEasing	Easing метод для каждого типа перехода (По-умолчанию swing)
openOpacity/ closeOpacity	Если установлено «true», то меняется прозрачность (По-умолчанию true)
openMethod/ closeMethod/ nextMethod/ prevMethod	Эффект transition может принимать значения ‘zoomIn’ / ‘zoomOut’ / ‘changeIn’ / ‘changeOut’
parent	Родительский элемент в контейнере. Это полезно для ASP.NET, где верхний элемент является «формой» (По-умолчанию body)

И это еще не все. На странице автора Вы также сможете найти специальные функции для плагина и callback методы, ссылка в начале статьи.

Пользоваться данными параметрами очень просто, допустим мы хотим уменьшить отступы до содержимого контента и высоту содержимого:

1
2
3
4

$(«.modalbox»).fancybox({
padding : 0,
height : 100
});

Отправка сообщения

Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса.<>()[\]\\.,;:\s@»]+)*)|(«.+»))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}

Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(«#send»).on(«click», function(){
var emailval = $(«#email»).val();
var msgval = $(«#msg»).val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
// Проверка правильности электронного адреса
if(mailvalid == false) {
$(«#email»).addClass(«error»);
}
else if(mailvalid == true){
$(«#email»).removeClass(«error»);
}
// Проверка длины сообщения
if(msglen < 4) {
$(«#msg»).addClass(«error»);
}
else if(msglen >= 4){
$(«#msg»).removeClass(«error»);
}

Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (msglen) и проводим проверку введенного электронного адреса (mailvalid). Далее проверяем если в переменная mailvalid равна false, значит электронный адрес введен неверно, и данный инпут будет подсвечен красным. Также проверяем количество введенных символов в текст сообщения, если меньше 4 символов значит показываем, что это ошибка (подсвечиваем текстовый инпут красным).

Теперь о второй части этого обработчика события OnClick нам нужно отправить данные формы в PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

if(mailvalid == true && msglen >= 4) {
// если обе проверки пройдены
// сначала мы скрываем кнопку отправки
$(«#send»).replaceWith(«<em>отправка…</em>»);

$.ajax({
type: ‘POST’,
url: ‘sendmessage.php’,
data: $(«#contact»).serialize(),
success: function(data) {
if(data == «true») {
$(«#contact»).fadeOut(«fast», function(){
$(this).before(«<strong>Успешно! Ваше сообщение отправлено :)</strong>»);
setTimeout(«$.fancybox.close()», 1000);
});
}
}
});
}
});

Если оба поля проверены то вместо кнопки «отправить» показываем текст, что происходит отправка сообщения. Это дает пользователю подтверждение того, что оба поля проверены и идет процесс.

Теперь запрос AJAX. Первый параметр запроса это тип передачи данных (POST или GET). Далее указываем файл обработчик (sendmessage.php). Следующий параметр data (данные), методом serialize подготавливаем данные в формах для отправки на сервер.

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

PHP сценарий

Мы посылаем данные, введенные пользователем с помощью JQuery в sendmessage.php. В PHP мы формируем получаем эти данные из POST массива, формируем и отправляем сообщение. Если отправка прошла успешно возвращаем обратно в JQuery true иначе false.

В переменной $sendto мы указываем адрес электронной почты на который будут приходить письма.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$sendto = «[email protected]»;
$usermail = $_POST[’email’];
$content = nl2br($_POST[‘msg’]);

// Формирование заголовка письма
$subject = «Новое сообщение»;
$headers = «From: » . strip_tags($usermail) . «\r\n»;
$headers .= «Reply-To: «. strip_tags($usermail) . «\r\n»;
$headers .= «MIME-Version: 1.0\r\n»;
$headers .= «Content-Type: text/html;charset=utf-8 \r\n»;

// Формирование тела письма
$msg = «<html><body>»;
$msg .= «<h3>Новое сообщение</h3>\r\n»;
$msg .= «<p><strong>От кого:</strong> «.$usermail.»</p>\r\n»;
$msg .= «<p><strong>Сообщение:</strong> «.$content.»</p>\r\n»;
$msg .= «</body></html>»;

// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
echo «true»;
} else {
echo «false»;
}

Просмотр демо страницы и скачивание исходников не доступно

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Модальное окно на jquery · GitHub

Instantly share code, notes, and snippets.

Модальное окно на jquery

	Создается пустой элемент с классом .bg и ставится перед закрывающим тегом body.
	Сама галерея в данном случае это список ссылок(‘.click_me’), которые оборачивают img.


	.click_me {
	width: 100px;
	display: inline-block;
	height: 100%;
	img {
	max-width: 100%;
	}
	}
	.bg {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: black;
	opacity: 0.8;
	z-index: 100;
	top: 0;
	left: 0;
	display: none;
	img {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	margin: auto;
	display: none;
	height: auto;
	width: auto;
	}
	}



	(function () {
	var bg = $(‘.bg’);

	$(‘.click_me’).on(‘click’, function(e) {
	var img = $(this).find(‘img’),
	bg_width = bg.width(),
	bg_height = bg.height();

	e.preventDefault();
	img.clone().appendTo(bg);
	bg.fadeIn(300).find(‘img’).css({‘max-width’:bg_width-100,’max-height’:bg_height-100}).delay(300).fadeIn(300);
	});

	bg.on(‘click’, function() {
	bg.fadeOut(500).empty();
	});

	}());

You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Адаптивное модальное окно для сайта

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

Смотреть примерСкачать

Что нужно для того, чтобы модальное окно заработало?

HTML

Подключаем jQuery библиотеку (свежую версию можно скачать здесь) и плагин jquery.adaptive-modal.js с его таблицей стилей (можно скачать здесь):

Далее в HTML документ в нужное место между тегами <body> </body> вставляем следующую ссылку с атрибутами href, data-toggle, data-title:

<body>
  ..
  <a href="#" data-toggle="adaptive-modal" data-title="Текст модального окна">Включатель модального окна</a>
  ..
</body>

Вуаля! Это всё что нужно для того чтобы модальное окно заработало. В атрибуте data-toggle мы пишем значение data-toggle=»adaptive-modal», тем самым показывая что это модальное окно. А в атрибуте data-title пишем весь текст модального окна, используя при этом необходимые теги (поддерживаются все HTML теги), чтобы красиво оформить контент внутри окна.

Для более опытных

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

Для того, чтобы сделать это возможным HTML структура должна выглядеть так:

<a href="#form" data-toggle="adaptive-modal">Открыть модальное окно</a>
<div>
    <h2>Вход на сайт</h2>
    <form>
        <input type="text" placeholder="Логин">
        <input type="password" placeholder="Пароль">
        <div>
            <a href="#">Войти</a>
        </div>
    </form>
</div>

В этом можно убедиться посмотрев Демо 3.

И самое интересное что может этот плагин — это показывать контент удаленного сайта (иными словами — постороннего сайта). Для этого смотрите Демо 5.

Здесь используются AJAX запросы, для получения информации методом GET с другого сайта. Чтобы лучше понять как это работает давайте взглянем на ссылку вызова модального окна:

1	<a href="#" data-remote="true" data-datatype="json" data-am-custom-class="modal3">Открыть удаленный сайт</a>

Как видите, в атрибуте href находится адрес страницы с необходимым содержимым. Далее атрибут data-remote со значением true показывает что страница будет грузиться извне. И, наконец, атрибут data-datatype указывает на то, какой формат данных будет принимать этот скрипт (в нашем примере это json).

Также хочу рассказать о возможности добавлять свои действия перед появлением модального окна и после его исчезновения.

Для этого используются две функции beforeAnimate: function(el, status) и afterAnimate: function(el, status). Вот небольшой код с примером использования этих функций:

$(".am-remote-link").adaptiveModal({
    beforeAnimate: function(el, status) {
        ...
    }
 
    afterAnimate: function(el, status) {
        ...
    }
});

Вывод

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

Успехов!

С Уважением, Юрий Немец

Источник: http://www.onextrapixel.com/2014/06/25/create-modal-windows-that-can-be-morphed-from-anything-with-jquery-adaptive-modal-js/

Простое модальное окно | vallyol.ru

HTML

В разметке присутствуют два основных элемента:

«Активатор», элемент, по нажатию на который модальное окно откроется. У меня этим элементом будет тег a с классом do-open, который я располагаю в блоке container
Собственно, само модальное окно. У меня — это блок с идентификатором modal

Примечание: внутри блока modal я разместил простую форму обратной связи. Содержимое может быть любым .

CSS

Изначально я описываю блок container и добавляю минимальное оформление гиперссылке:

.container {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
}
.do-open {
  padding: .75rem 1.5rem;
  background-color: magenta;
  color: white;
  cursor: pointer;
}

Теперь — модальное окно #modal. Так как оно должно «перекрывать» всё содержимое страниц, устанавливаю для него положение fixed с высотой и шириной блока в 100%. С такими правилами доступ к кнопке теряется, поэтому устанавливаю display: none; как css-правило для модального окна по умолчанию.

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-color: rgba(0,0,0,.6);
  display: none;
}

Внутренний блок modal-content содержит заголовок, форму и «крестик» (для закрытия модального окна). Для него я задаю ширину 75% и position: relative;. Указать положение необходимо потому, что кнопка do-close будет расположена абсолютно относительно своего родительского блока.

.modal-content {
    padding: 1.5rem;
    background-color: #ffffff;
    width: 75%;
    margin: auto;
    position: relative;
}
.do-close {
      display: block;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      padding: .7rem;
      &:hover {
        background-color: magenta;
        color: white;
      }
    }

Здесь я добавил изменение цвета «крестика» по ховеру.

С такими правилами мы получим обычное окно, открывающееся «мгновенно». Поэтому, я добавил немного анимации: блоку modal-content добавил дополнительный класс zoom со следующими параметрами:

.zoom {
  animation: zoom .5s;
  @keyframes zoom {
    from{transform:scale(0)}
    to{transform:scale(1)}
  }
}

То есть, в течении половины секунды модальное окно будет масштабироваться от 0 до 1.

jQuery

При помощи jQuery достаточно просто описать поведение модального окна в случаях, когда посетитель нажимает на кнопку do-open для «проявления» окна и на do-close для его закрытия:

$(document).ready(function() {
  $('.do-open').on('click', function() {
    $('#modal').css('display', 'block');
  });
  $('.do-close').on('click', function() {
    $('#modal').css('display', 'none');
  });
});

Смотрим результат:

Object 1 — Simple Modal

Модальное окно jquery для вашего сайта- Сделай сам!

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

А как это воплотить в жизнь и чтобы это окно не раздражало наших посетителей? Все сейчас вам расскажу и покажу! Давайте приступим …

Делаем свое собственное модальное окно jquery на сайте!

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

модальное окно для сайта

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

Вот здесь можно посмотреть пример моего модального окошка: ПРИМЕР

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

После скачивания всех файлов, Вы можете их исправить и заменить все картинки на свои, которые будут для Вас приемлемы!

Так же Вы можете править в файле index.html весь текст. который написан на русском языке под себя и так же обязательно поправьте форму подписки, там сложностей у Вас не должно возникнуть. Не обязательно ваш сервис рассылки, которым Вы пользуетесь должен быть таким же как у меня. исправьте его на свой.

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

Пишите я вам отвечу на все ваши вопросы!

Если вам понравился материал пожалуйста сделайте следующее…

Поставьте «лайк».

Сделайте ретвит.

Поделитесь этим постом с друзьями в социальных сетях.

И конечно же, оставьте свой комментарий ниже

Спасибо за внимание!

Всегда ваш Валерий Бородин

Вы будете первым, кто поставит оценку!

Bootstrap JS Modal Reference

JS Modal (modal.js)

Модуль Modal — это диалоговое / всплывающее окно, которое отображается поверх текущая страница.

Учебник по модальным окнам см. В нашем Bootstrap. Модальное руководство.

Классы модальных подключаемых модулей

Класс	Описание
. Модальный	Создает модальное окно
.модальное содержание	Правильно задает стиль модального окна с помощью границы, цвета фона и т. Д. Используйте этот класс для добавления заголовка, тела и нижнего колонтитула модального окна.
.modal-заголовок	Определяет стиль заголовка модального окна
. Модальный кузов	Определяет стиль тела модального окна
.modal-footer	Определяет стиль нижнего колонтитула в модальном окне. Примечание. По умолчанию эта область выровнена по правому краю. Чтобы изменить это, перезапишите CSS с помощью text-align: left \| center
.modal-sm	Задает небольшой модальный
.modal-lg	Задает большое модальное окно
. Затухание	Добавляет эффект анимации / перехода, который постепенно усиливает и исчезает.

Запуск модального через data- * Атрибуты

Добавить data-toggle = "modal" и data-target = "# modalID" в любой элемент.

Примечание: Для элементов опустите data-target и используйте href = "# modalID" вместо:

Пример

Open Modal

Открыть модальный

Попробуй сам »

Запуск через JavaScript

Включить вручную с помощью:

Модальные опции

Параметры можно передавать через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к data-, как в data-backdrop = «».

Имя	Тип	По умолчанию	Описание	Попробуй
фон	логическое значение или строка «static»	правда	Определяет, должно ли модальное окно иметь темное наложение: true — темное наложение false — без наложения (прозрачный) Если указать значение «статический», то невозможно закрыть модальное окно при нажатии вне его	Использование JS Использование данных
клавиатура	логическое	правда	Указывает, можно ли закрыть модальное окно с помощью клавиши выхода (Esc): true — модальное окно можно закрыть с помощью Esc false — модальное окно не может быть закрыто с помощью Esc	Использование JS Использование данных
показать	логическое	правда	Указывает, отображать ли модальное окно при инициализации	Использование JS Использование данных

Имя

Тип

По умолчанию

Описание

Попробуй

фон

логическое значение или строка «static»

правда

Определяет, должно ли модальное окно иметь темное наложение:

true — темное наложение
false — без наложения (прозрачный)

Если указать значение «статический», то невозможно закрыть модальное окно при нажатии вне его

Использование JS Использование данных

клавиатура

логическое

правда

Указывает, можно ли закрыть модальное окно с помощью клавиши выхода (Esc):

true — модальное окно можно закрыть с помощью Esc
false — модальное окно не может быть закрыто с помощью Esc

Использование JS Использование данных

показать

логическое

правда

Указывает, отображать ли модальное окно при инициализации

Использование JS Использование данных

Модальные методы

В следующей таблице перечислены все доступные модальные методы.

Метод	Описание	Попробуй
. Модальный ( опций )	Активирует содержимое как модальное окно. Допустимые значения см. Выше в параметрах	Попробовать
.modal («переключатель»)	Переключает модальное окно	Попробовать
.modal («показать»)	Открывает модальное окно	Попробовать
.модальный («скрыть»)	Скрывает модальное окно	Попробовать

Модальные события

В следующей таблице перечислены все доступные модальные события.

Событие	Описание	Попробуй
показать модальные перевозки	Происходит, когда должно быть показано модальное окно	Попробовать
показан модальный	Происходит при полном отображении модального окна (после завершения переходов CSS)	Попробовать
скрыть.bs.modal	Происходит, когда модальное окно собирается скрыть	Попробовать
скрытый модальный	Происходит, когда модальное окно полностью скрыто (после завершения переходов CSS)	Попробовать

Другие примеры

Модальный вход

В следующем примере создается модальное окно для входа в систему:

Пример

Пример модального входа в систему

Вход в систему

Войти

Не являетесь участником? Зарегистрироваться

Забыли пароль?

Попробуй сам »

jquery-modal — npm

Простой и легкий метод отображения модальных окон с помощью jQuery.

Для быстрых примеров и демонстраций посетите jquerymodal.com.

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

Напротив, этот плагин обрабатывает два наиболее распространенных сценария, с которыми я сталкиваюсь.

отображение существующего элемента DOM
загрузка страницы с помощью AJAX

и использует как можно меньше HTML и CSS.

Вы можете установить jquery-modal с помощью npm:

npm установить jquery-modal

или с Bower:

bower установить jquery-modal

или используйте размещенную версию от cdnjs:

Используете Rails? Оцените плагин jquery-modal-rails!

Требования jQuery: Начиная с версии 0.3.0, требуется jQuery 1.7. Если вы используете более раннюю версию jQuery, вы можете использовать тег v.0.2.5.

Конфликт имен с Bootstrap: Модальное окно Bootstrap использует то же пространство имен $ .modal . Если вы хотите использовать jquery-modal с Bootstrap, самое простое решение — вручную изменить имя этого плагина.

Метод 1. Автоматическое присоединение к ссылкам

Самый простой подход — добавить rel = "modal: open" к вашим ссылкам и использовать атрибут href , чтобы указать, что открывать в модальном окне.

Открыть существующий элемент DOM по ID:

Войти

Загрузить удаленный URL-адрес с помощью AJAX:

Войти

Метод 2: вручную

Вы можете вручную открыть модальное окно, вызвав метод .modal () для элемента:

  $ ('# форма входа'). Modal ();

Вы также можете вызвать .modal () прямо по ссылкам:

Открыть элемент DOM

Открыть модальное окно AJAX

  $ ('a [data-modal]'). Click (функция (событие) {
  $ (this) .modal (); 
  return false; 
 });

Отклонение совместимости

Вы можете предоставить чистый запасной вариант для пользователей, у которых отключен JavaScript, вручную прикрепив модальное окно с помощью атрибута data-modal . Это позволяет писать ссылки, указывающие на href как обычно (резерв), при включении модальных окон, в которых включен JavaScript.

Войти

Переходы с исчезновением

По умолчанию наложение и окно появляются мгновенно, но вы можете включить эффект затухания, указав параметр fadeDuration .

  $ ('a.open-modal'). Click (функция (событие) {
  $ (this) .modal ({
  fadeDuration: 250 
 }); 
  return false; 
 });

Будет плавно в наложении и модальном режиме более 250 миллисекунд одновременно. Если вы хотите, чтобы эффект наложения отображался перед окном , вы можете указать опцию fadeDelay . Это указывает, в какой момент во время перехода наложения должен начаться переход окна.

Итак, если вы хотите, чтобы окно исчезло, когда оверлей закончен на 80%:

  $ (вяз) .modal ({
  fadeDuration: 250, 
  fadeDelay: 0.80 
 });

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

  $ (вяз) .modal ({
  fadeDuration: 250, 
  fadeDelay: 1.5 
 });

Параметр fadeDelay применяется только при открытии модального окна.При закрытии модального окна и модальное окно, и наложение исчезают одновременно в соответствии с настройкой fadeDuration .

Затухание — единственный поддерживаемый переход.

Поскольку одновременно может быть активным только одно модальное окно, нет необходимости выбирать, какое модальное окно закрывать:

Подобно тому, как ссылки могут быть автоматически привязаны к открытым модальным окнам, они могут быть привязаны к закрытым модальным окнам с помощью rel = "modal: close" :

Закрыть окно

(обратите внимание, что модальные окна, загруженные с помощью AJAX, удаляются из DOM при закрытии).

Используйте $ .modal.isActive () , чтобы проверить, отображается ли модальное окно в настоящее время.
Используйте $ .modal.getCurrent () для получения ссылки на текущий активный модальный экземпляр, если таковой имеется.

Это поддерживаемые параметры и их значения по умолчанию:

$ .modal.defaults = {

closeExisting: true,

escapeClose: true,

clickClose: true,

closeText: 'Close',

closeClass: ',

showClose: true: true,

modalClass: "модальный",

blockerClass: "модальный",

spinnerHtml: '

showSpinner: true,

fadeDuration: null,

fadeDelay: 1.0

};

Следующие события запускаются в модальном элементе в различных точках цикла открытия / закрытия (события AJAX см. Ниже).

  $ .modal.BEFORE_BLOCK = 'модальный: перед блоком'; 
  $ .modal.BLOCK = 'модальный: блок'; 
  $ .modal.BEFORE_OPEN = 'модальный: до открытия'; 
  $ .modal.OPEN = 'модальный: открытый'; 
  $ .modal.BEFORE_CLOSE = 'модальный: до закрытия'; 
  $.modal.CLOSE = 'модальный: закрыть'; 
  $ .modal.AFTER_CLOSE = 'модальный: после закрытия';

Первым и единственным аргументом, передаваемым этим обработчикам событий, является модальный объект , который имеет четыре свойства:

  мод. $ Вяз; 
  мод. Опций; 
  модал. $ Blocker; 
  мод. $ Привязка;

Итак, вы можете сделать что-то вроде этого:

  $ ('# Purchase-form'). On ($. Modal.BEFORE_CLOSE, function (event, modal) {
  clear_shopping_cart (); 
 });

Базовая поддержка

jQuery Modal использует $.get для базовой поддержки AJAX. Простой счетчик будет отображаться по умолчанию (если вы включили modal.css) и будет иметь класс modal-spinner . Если вы установили опцию modalClass , вместо этого счетчик будет иметь префикс с этим именем класса.

Вы можете добавить текст или дополнительный HTML-код к счетчику с помощью параметра spinnerHtml или полностью отключить счетчик, установив showSpinner: false .

Спиннер по умолчанию взят из превосходного SpinKit от Tobias Ahlin 👍

События

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

  $ .modal.AJAX_SEND = 'модальный: ajax: send'; 
  $ .modal.AJAX_SUCCESS = 'модальный: ajax: успех'; 
  $ .modal.AJAX_FAIL = 'модальный: ajax: fail'; 
  $ .modal.AJAX_COMPLETE = 'модальный: ajax: complete';

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

Более продвинутая обработка AJAX

Хорошая идея — обеспечить более надежную обработку AJAX, в частности обработку ошибок.Вместо того, чтобы вмещать бесчисленное множество опций $ .ajax , которые предоставляет jQuery, jquery-modal позволяет напрямую изменять сам запрос AJAX.

Просто пропустите обработку AJAX по умолчанию (т. Е .: не используйте rel = "modal" )

Щелкните меня!

и сделайте запрос AJAX в обработчике кликов ссылки. Обратите внимание, что вам нужно вручную добавить новый HTML / модальный код в ответ success :

  $ ('a [rel = "ajax: modal"]').click (функция (событие) {
  
  $ .ajax ({
  
  url: $ (this) .attr ('href'), 
  
  success: function (newHTML, textStatus, jqXHR) {
)  $ (newHTML) .appendTo ('body'). Modal (); 
 }, 
  
  ошибка: функция (jqXHR, textStatus, errorThrown) {
  
 } 
  
  
 } 
 } ); 
  
  возврат false; 
 });

Обратите внимание, что ответ AJAX должен быть заключен в div с модальным классом при использовании второго (ручного) метода.

Нашли ошибку? MEH!

Шучу. Пожалуйста, создайте проблему и включите общедоступную демонстрацию ошибки. Dropbox или JSFiddle хорошо подходят для демонстрации воспроизводимых ошибок, но вы можете использовать все, что угодно, если оно общедоступно. Ваша проблема с большей вероятностью будет решена / объединена, если она будет включать в себя запрос на исправление и извлечение.

Есть идея улучшить jquery-modal? Отлично! Разветвите этот репозиторий, реализуйте свою идею (включая документацию, если необходимо) и отправьте запрос на перенос.

Я не использую эту библиотеку так часто, как раньше, поэтому, если вы хотите увидеть исправление / улучшение, лучше всего отправить запрос на перенос. Ошибки без тестового примера и / или улучшения без запроса на вытягивание не будут пощады и закрыты!

Требуются обслуживающие лица

Эта библиотека стала более популярной и активной, чем я ожидал, и, к сожалению, у меня нет времени на ее обслуживание.

Если вы заинтересованы в том, чтобы помочь мне поддерживать эту библиотеку, пожалуйста, дайте мне знать — Я буду рад вашей помощи!

Подробнее о том, как стать сопровождающим »

Я особенно хотел бы, чтобы люди были в восторге от работы над совершенно новым jQuery Modal 2.0 . См. Мое предложение для jQuery Modal 2.0 для получения более подробной информации и обсуждения.

Как внести свой вклад

Я приветствую улучшения этого плагина, в частности:

Повышение производительности
Сделать код максимально кратким / эффективным
Исправления ошибок и совместимость с браузерами

Разветвите и отправьте запросы на вытягивание или создайте проблему. Имейте в виду, что дух этого плагина — минимализм , поэтому я очень требователен к добавлению новых функций .

Советы по разработке / участию

Убедитесь, что зависимости установлены: npm install
После изменения jquery.modal.js и / или jquery.modal.css вы можете при желании регенерировать уменьшенные файлы с помощью gulp min и gulp css соответственно.
При необходимости убедитесь, что у вас обновлена документация ( README.md и / или examples / index.html ). Запросы на извлечение без обновлений документации будут отклонены.
должны увеличивать номера версий и запускать журнал изменений gulp при вырезании нового выпуска.

Задайте вопрос на StackOverflow. Также доступна коммерческая поддержка по электронной почте — пожалуйста, свяжитесь с [email protected], чтобы узнать цены. К сожалению, я не могу предоставить бесплатную поддержку по электронной почте.

jQuery Modal распространяется по лицензии MIT:

  Copyright (c) 2012 Кайл Фокс

Разрешение предоставляется бесплатно любому лицу, получившему
копию этого программного обеспечения и связанных файлов документации (
«Программное обеспечение») для работы с Программным обеспечением без ограничений, включая
без ограничения права на использование, копирование, изменение, объединение, публикацию,
распространять, сублицензировать и / или продавать копии Программного обеспечения, а также
разрешить лицам, которым предоставляется Программное обеспечение, делать это, при условии
следующие условия:

Вышеупомянутое уведомление об авторских правах и это уведомление о разрешении должны быть
включены во все копии или существенные части Программного обеспечения.ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ.
ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ
КОММЕРЧЕСКАЯ ЦЕННОСТЬ, ПРИГОДНОСТЬ ДЛЯ КОНКРЕТНОЙ ЦЕЛИ И
НЕСООТВЕТСТВИЕ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ДЕРЖАТЕЛИ АВТОРСКИХ ПРАВ
ОТВЕТСТВЕННОСТЬ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГИЕ ОТВЕТСТВЕННОСТЬ В ДЕЙСТВИИ
ДОГОВОРА, ПРАВОНАРУШЕНИЯ ИЛИ ИНОГО СЛУЧАЯ, ВЫВОДЯЩИХСЯ ИЗ, ИЗ ИЛИ В СВЯЗИ
С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ДРУГИМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

Modal · Bootstrap

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

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

Перед тем, как приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, так как параметры нашего меню недавно изменились.

Модальные окна созданы с использованием HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , чтобы вместо этого прокручивалось модальное содержимое.
Щелчок по модальному «фону» автоматически закрывает модальное окно.
Bootstrap поддерживает только одно модальное окно за раз.Вложенные модальные окна не поддерживаются, так как мы считаем, что они неудобны для пользователей.
используется положение : фиксированное , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Скорее всего, вы столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
Еще раз, из-за позиции : исправлено , есть некоторые предостережения при использовании модальных окон на мобильных устройствах.См. Дополнительную информацию в нашей документации по поддержке браузера.
Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:

  $ ('# myModal'). On ('shown.bs.modal', function () {
  $ ('# myInput'). trigger ('фокус')
})

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

Примеры

Модальные компоненты

Ниже приведен модальный пример static (это означает, что его позиция и отображение были переопределены).Включены модальный заголовок, модальное тело (требуется для заполнения ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставлять другое явное действие по отклонению.

Здесь идет модальный основной текст.

  
  
    
      
          Модальный заголовок  
        
      
      
         Здесь находится модальный основной текст.

Живая демонстрация

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

Woohoo, вы читаете этот текст в модальном окне!

Запустить демонстрационный модальный режим

  




  
    
      
          Модальный заголовок  
        
      
      
        ...

Прокрутка длинного содержимого

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