Модальное окно авторизации jquery. Делаем всплывающее окно jquery
Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.
В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью JQuery и CSS. Особенность данного примера в том, что тут не требуется , ну за исключением самой библиотеки JQuery.
Размещаем код модального окна на странице:
закрыть Открыть модальное окно
Как видно из разметки, блок самого модального окна это div c атрибутом id=modal_form , который содержит элемент span c id=modal_close . Этот элемент будет служить кнопкой для закрытия модального окна, кроме того, ниже блока расположен блок div с атрибутом id=overlay , который служит одновременно и для затемнения фона. Модальное окно будет открываться по ссылке, с классом modal .
CSS для модального окна
#modal_form { width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px; } #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #overlay { z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; height:100%; top:0; left:0; cursor:pointer; display:none; }
Для modal_form мы задали фиксированную ширину и высоту, а затем отцентрировали положение по центру экрана. Для подложки модального окна (overlay ) мы задаем размер по ширине экрана, заливку с прозрачностью, а так же прячем её по умолчанию. Особый момент с z-index , у модального окна он должен быть наибольшим из всех элементов на странице, а у обложки должен быть больше всех элементов, кроме самого модального окна.
Теперь к самому основному, это код на javascript. Для модального окна будет использоваться два основных события, это его открытие — клик по элементу с классом modal , в нашем случае это ссылка, и закрытие модального окна, это клик по обложке (overlay ), либо клик на кнопку закрыть, в нашем случае это элемент span с id=modal_close .
$(document).ready(function() { $(".modal").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(400, // анимируем показ обложки function(){ // далее показываем мод. окно $("#modal_form") .css("display", "block") .animate({opacity: 1, top: "50%"}, 200); }); }); // закрытие модального окна $("#modal_close, #overlay").click(function(){ $("#modal_form") .animate({opacity: 0, top: "45%"}, 200, // уменьшаем прозрачность function(){ // пoсле aнимaции $(this).css("display", "none"); // скрываем окно $("#overlay").fadeOut(400); // скрывaем пoдлoжку }); }); });
Посредством animate мы меняем позицию по вертикали top , а так же прозрачность opacity , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
1. Модальное окно на jQuery «Simple Modal Box» 2. jQuery плагин «LeanModal»
Отображение контента в модальных окнах. Для просмотра плагина в действии на демонстрационной странице нажмите на ссылку: Sign Up Form или Basic Content.
3. jQuery плагин «ToastMessage»
Всплывающие сообщения. Плагин в двух вариантах. В одном случае сообщения исчезают самостоятельно, по прошествии определённого времени, во второй реализации для того чтобы закрыть сообщение необходимо нажать на кнопку.
4. Содержимое, всплывающее в модальном окне
Плагин «Reveal». Для просмотра плагина в действии нажмите на кнопку «Fire A Reveal Modal» на демонстрационной странице.
5. Симпатичные диалоговые окна
Нажмите на крестик на демонстрационной странице, чтобы посмотреть плагин в действии.
6. Mootools модальное окно, плагин «MooDialog»
jQuery плагин для отображения формы обратной связи во всплывающем окне.
10. MooTools плагин «LightFace» для реализации диалоговых окон Facebook
Диалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.
11. jQuery модальное окно
Аккуратное всплывающее диалоговое окно на jQuery.
12. Модальные окна jQuery
Симпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.
13. Модальные окна jQuery
Всплывающие модальные окна нескольких видов. Для просмотра плагина в действии нажмите на ссылку на демонстрационной странице.
Сообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.
16. Модальное окно «ModalBox» на javascript
Реализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.
17. «Leightbox» плагин с использованием библиотеки Prototype
Плагин для отображения контента в модальных окнах.
Сегодня мы разберемся с вами как делать всплывающее окно jquery, чтобы показывать скрытый контент по запросу, например чтобы показать . Сделать это достаточно просто, дочитайте до конца.
Как сделать всплывающее окно jqueryВсплывающее окно jquery состоит из таких элементов:
- фона или затемнения
- всплывающего окна
- контента всплывающего окна
Итак, как всегда, сначала приступим к верстке HTML.
Заголовок всплывающего окна X
Содержимое всплывающего окна, форма обратной связи или что-то, что вам нужно.
Готово, у нас уже есть затемнение (.popup_overlay), всплывающее окно (.popup), заголовок всплывающего окна (.popup_title), кнопка закрытия всплывающего окна (.closer), и содержимое всплывающего окна (.popup_content).
Теперь нам нужно сделать так, чтобы это всплывающее окно отображалось всплывающим, а не просто так, и чтобы затеменение перекрывало фон.
Popup_overlay{ display: none; background: rgba(0,0,0,.9); width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .popup{ display: none; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,1); width: 600px; height: 500px; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -250px; } .popup_title{ font-weight: bold; padding: 10px; } .popup_content{ padding: 10px; border-top: 1px solid #ccc; } .closer{ float: right; cursor: pointer; }
Готово. Всплывающее окно jquery оформлено. Если заметили, у самого всплывающего окна и у затеменения стоит display: none, это сделано для того, чтобы всплывающее окно не показывалось на сайте до нужного момента. А теперь добавим отображение всплывающего окна в нужный момент (то есть по нажатию на нужную кнопку).
Всплывающее окно jquery
Ну а теперь код на jquery. Все достаточно просто. Привязывем действие на событие клика на нужную кнопку.
$(function(){ $("button").click(function(){ $(".popup,.popup_overlay").fadeIn(400); //показываем всплывающее окно }); $(".closer,.popup_overlay").click(function(){ $(".popup,.popup_overlay").fadeOut(400); //скрываем всплывающее окно }); });
Готово. Всплывающее окно будет отображаться и скрываться тогда, когда нам нужно (при нажатии на кнопку button и кнопку.closer соответственно).
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)
Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.
Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появлятьсяjQuery код
$(document).ready(function()
{
alert("Текст во всплывающем окне");
});
Код вставляете в любое место в body
Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:
А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:
$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});
Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу
Для начала напишем html-часть . Этот код размещаем в body Вашего документа.
Вызов модального окна
Текст модального окна
Закрыть
Текст в модальном окне.
Код CSS . Либо в отдельном css-файле, либо в в head.
body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}
В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.
Внимание! Не забываем подключить библиотеку в head документа!
Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.
Код jQuery
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});
Здравствуйте, уважаемые читатели a! Однажды я уже писал о модальных окнах, то была статья . В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox . А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!
Что нам понадобится?! не так уж и много:
- библиотека jQuery;
- плагин fancybox;
- сценарий PHP для отправки сообщения.
Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox , очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.
Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:
Отправить сообщение |
Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:
1 |
Отправить E-mail |
Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.
Изначально форма скрыта:
#inline { display : none ; } |
Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:
1 | Txt
{
Txtarea
{
Txt
:
focus
,
Input.error,
Input.error
:
focus
,
|
Для оформления кнопки «Отправить» будем .:
1 | #send
{
#send
:
hover
{
#send
:
active
{
|
Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:
$(document)
.ready
(function
()
{
|
Также отменяем стандартное действие формы 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) |
Пользоваться данными параметрами очень просто, допустим мы хотим уменьшить отступы до содержимого контента и высоту содержимого:
1 | $(".modalbox"
)
.fancybox
({
|
Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса. Поэтому нам понадобится функция проверки. Использовать будем регулярное выражение:
1 | function
validateEmail(email)
{
|
Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:
1 | $("#send"
)
.on
("click"
,
function
()
{
|
Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (msglen
) и проводим проверку введенного электронного адреса (mailvalid
). Далее проверяем если в переменная mailvalid
равна false
, значит электронный адрес введен неверно, и данный инпут будет подсвечен красным. Также проверяем количество введенных символов в текст сообщения, если меньше 4 символов значит показываем, что это ошибка (подсвечиваем текстовый инпут красным). $("#contact"
)
.serialize
()
,
success:
function
(data)
{
if
(data ==
"true"
)
{
$("#contact"
)
.fadeOut
("fast"
,
function
()
{
$(this
)
.before
("Успешно! Ваше сообщение отправлено:)"
)
;
setTimeout("$.fancybox.close()"
,
1000
)
;
}
)
;
}
}
}
)
;
}
}
)
;
Если оба поля проверены то вместо кнопки «отправить» показываем текст, что происходит отправка сообщения. Это дает пользователю подтверждение того, что оба поля проверены и идет процесс.
Теперь запрос AJAX. Первый параметр запроса это тип передачи данных (POST или GET). Далее указываем файл обработчик (sendmessage.php ). Следующий параметр data (данные), методом serialize подготавливаем данные в формах для отправки на сервер.
Если мы получим хороший отклик от сервера (эти данные мы формируем в пхп файле), то мы скроем контактную форму и покажем сообщение об успехе отправки. Я использую SetTimeout() , для того чтобы модальное окно закрылось не сразу а через секунду после отправки данных.
PHP сценарийМы посылаем данные, введенные пользователем с помощью JQuery в sendmessage.php . В PHP мы формируем получаем эти данные из POST массива, формируем и отправляем сообщение. Если отправка прошла успешно возвращаем обратно в JQuery true иначе false .
В переменной $sendto мы указываем адрес электронной почты на который будут приходить письма.
1 | $sendto
=
"[email protected]"
;
// Формирование заголовка письма
// Формирование тела письма
От кого: " . $usermail . " \r \n " ;$msg .= " Сообщение: " . $content . " \r \n " ;$msg .= "" ; // отправка сообщения
|
