Красивое модальное окно на jquery. Создаём всплывающее модальное окно jQuery
Это легкое JQuery модальное всплывающее окно плагина (только 1.49KB). Скрипт не создает и не стилизует всплывающее окно, но предоставляет вам всю логику центрирования, модального наложения, события и многого другого. Это дает вам много возможностей для настройки, что будет соответствовать вашим потребностям.
2. MessiЭто плагин JQuery, чтобы показать чистоту, элегантность сообщения. С Месси, вы избежите использования значения по умолчанию, уведомления о тревоге или новых окон, чтобы обеспечить расширенную информацию для пользователя.
3. Shadowbox.jsСтандартное приложение просмотра, которое поддерживает все самые популярные форматы веб-издательских средств массовой информации.
4. jQuery ImpromptuРасширение, чтобы помочь обеспечить более приятный способ спонтанно побудить пользователя для входа. Более или менее это отличная замена для оповещений.
Demo
Плагин для JQuery, чтобы помочь вам отображать уведомления, диалоги, и модальные окна в веб-браузере.
Demo
6. Colorbox – a jQuery lightboxЛегкий настраиваемый лайтбокс плагин для jQuery
Demo
Обеспечивает быстрый способ показать данные без перезагрузки страницы.
Demo
8. jQuery Speedo PopupМаленький, мощный и настраиваемый JQuery Popup / модальный плагин. Построенный на HTML5 и CSS3.
Demo
9. BoxyГибкое диалоговое окно, Facebook стиль для JQuery с поддержкой перетаскивания и размера промежуточных кадров. Он отличается от других накладок, которые я видел, предоставляя интерфейс объекта для управления диалоговыми окнами после того как они были созданы.
Легкий JQuery плагин, который обеспечивает мощный интерфейс для окна. Думайте о нем, как о модальный окне.
Demo
11. Smooth PopupКак создать потрясающее и большое всплывающее окно с нуля, используя JQuery в простом и чистом уроке …
Demo
12. Exit Modal BoxВы должны показать конкретное сообщение для посетителей, которые оставляют ваш сайт? Вы можете сделать это путем инициирования модального окна, прежде чем они закроют окно браузера.
Demo
13. jQuery BlockUI PluginПозволяет моделировать синхронное поведение при использовании AJAX, без блокировки браузера. При его включении будет препятствовать активности пользователей со страницы (или части страницы), пока она не будет отключена. BlockUI добавляет элементы в DOM, чтобы дать ему внешний вид и поведение блокирующих взаимодействия с пользователем.
Demo
14. Tickbox (depracated)Виджет пользовательского интерфейса веб-страницы написаны на JavaScript в верхней части библиотеки JQuery. Его функция заключается в том, чтобы показать одно изображение, несколько изображений, встроенный контент, iframed содержание или содержание подается через AJAX в гибридной форме.
17. Simple jQuery ModalСоздать модальное окно используя Jquery
18. Likno Web Modal Windows BuilderLikno Web Builder является мощным WYSIWYG программным обеспечение для создания потрясающих JQuery модальных окон, диалоговых окон, модальных слайд-шоу, всплывающих окон и т.д. Приложение создает весь код, необходимый для того, чтобы не требовались навыки программирования. Все результаты кросс-браузерны, для CMS и для устройств.
Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.
В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью 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 , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
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();
});
});