Приветствую всех посетителей моего блога! Писать статьи получается очень редко, что не есть хорошо. Уже боюсь что-то обещать, как раньше — писать буду чаще и все такое. Причина вся та же — нехватка времени. Ну ладно, сегодняшний пост не об этом. Поговорим о всплывающих окнах для сайта . На просторах интернета практически нет сайтов, которые не используют всплывающие (модальные) окна. В связи с этим я посчитал, что данная тема для веб-разработчика очень важна. Скриптов модальных окон в сети интернет очень много. Какой из них выбрать, чтобы было проще подключать, проще пользоваться, обладал широкими возможностями и т.д.? Я для себя такой нашел…
Структура статьи
Magnific Popup — jQuery плагин всплывающих окон, сделанный с акцентом на производительность и удобство пользования. Так кратко описывает автор скрипта — Дмитрий Семенов и я с ним абсолютно согласен. Я уже достаточно долго использую Magnific Popap для модальных окон и успел в этом убедиться.
Вообще хотелось бы отметить, что Magnific очень популярен, как в рунете, так и в буржуйнете, не смотря на то, что разработчик русскоговорящий. В общем, Magnific Popup заслужил то, чтобы я про него написал отдельный пост.
Вот основные преимущества плагина, которые я могу выделить от себя:
Для того, чтобы сачать Magnific Popup переходим на официальный сайт разработчика . Жмем по ссылке «Build tool » и в модальном окне выбираем нужные нам модули. После всего жмем «Generate build » и получаем код плагина. Данный код необходимо скопировать в редактор кода, например, Notepade++ или Sublime Text и сохранить с расширением «.js «. Также в этом же окне билда вам надо сохранить код CSS. Для этого щелкаем правом кнопкой мыши по ссылке «CSS version » и сохраняем файл стилей. Если вы пользуетесь препроцессором, то сохраните файл «Sass version «. Если не получается сохранить перейдите по ссылке сохраните код самостоятельно в редакторе кода.
Подключение Magnific PopupПодключить плагин и начать работать с ним достаточно просто. Вообще на сайте есть подробная документация , правда она на английском. Но я скажу вам — чтобы заниматься веб-разработкой крайне важно знать английский язык на техническом уровне. Без этого никуда. Для меня лично не составляет труда изучить документацию по скриптам на английском языке. В конце концов есть также гугл переводчик , которым можно воспользоваться, если что-то непонятно.
В данной статье я рассмотрю только те моменты модальных окон, с которыми я разобрался и которые активно внедряю в процессе разработки сайтов. И так давайте начнем.
Подключаем файл плагина и файл стилей Magnific Popup. Если у вас не подключена библиотека jQuery, то обязательно следует подключить и ее. В общем, здесь подключение ничем не отличается от подключения любого другого скрипта jQuery. Про подключение стилей и скриптов я написал , советую ее почитать.
Типы модальных окон Тип контента в окне — Inline
Далее нам следует инициализировать наш плагин. Для этого нам нужно определиться с типом всплываемого контента. Давайте вызовем в модальном окне обычный текст. Тогда код инциализации будет для контента с типом — Inline .
JQuery(document).ready(function($) { $(".popup-content").magnificPopup({ type: "inline" }); });
Как видим событие вызова модального окна вешается на объект с классом «popup-content «. Поэтому создадим его, например, это будет ссылка с якорем на вызываемый блок с id=»text-popup» .
Вызвать окно с текстом
И еще кое что. Для того, чтобы наше окно стало видно нам необходимо в файл стилей «magnific-popup.css » добавить следующий код:
White-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; }
Данное правило задает фоновый цвет окну и отступы. Их изначально его нет в файле стилей, т.к. само окно можно оформить на свое усмотрение.
В результате у нас открывается модальное окно с нашим текстом. Все довольно просто.
Тип контента — ImageТеперь давайте откроем картинки в модальных окнах.
// Type Image - картинка без анимации $(".image-popup").magnificPopup({ type: "image" }); // Type Image Zoom - картинка с анимацией $(".image-popup-zoom").magnificPopup({ type: "image", zoom: { enabled: true, duration: 300 // продолжительность анимации. Не меняйте данный параметр также и в CSS } }); Галерея картинок — Gallery
инициализация будет следующей:
// Тип Image - галерея картинок $(".popup-gallery").magnificPopup({ delegate: "a", type: "image", tLoading: "Загрузка изображения #%curr%...", gallery: { enabled: true, navigateByImgClick: true, preload: // Will preload 0 - before current, and 1 after the current image } });
Тип контента — IframeТеперь давайте откроем в модальном окне видео Youtube.
Код инициализации будет следующим:
// Type Iframe - видео Youtube (или Vimeo), карты Гугл или другой контент в iframe $(".popup-youtube").magnificPopup({ type: "iframe" });
// Type Iframe - видео Youtube (или Vimeo), карты Гугл или другой контент в iframe $(".popup-youtube").magnificPopup({ type: "iframe", iframe: { patterns: { youtube: { index: "youtube.com/", // String that detects type of video (in this case YouTube). Simply via url.indexOf(index). id: "v=", // String that splits URL in a two parts, second part should be %id% // Or null - full URL will be returned // Or a function that should return %id%, for example: // id: function(url) { return "parsed id"; } src: "//www.youtube.com/embed/%id%?autoplay=1&rel=0" // Урл, который берется из кода iframe } } } });
Исходя из данного кода, видно, что мы создаем свой шаблон видео Youtube. В параметре «src» в конце добавляем параметр «rel=0» и все, теперь в конце видео не будет похожих роликов. Можете промотать видео до конца и посмотреть.
Тип — AjaxВ модальных окнах Magnific можно подгружать контент асинхронно, посредством технологии Ajax. Например, на демо-сайте я загружу страницу какой либо статьи в модальном окне. Демо-сайт работает на Joomla.
Загрузить страницу в мод. окне Ajax
Это обычная ссылка на страницу статьи. Это всего лишь пример и я ставлю адрес статьи со своего сайта. Чтобы показать только контент, отбросив ненужные блоки (шапка сайта, сайдбар, подвал и т.д.) я добавлю в конец адреса параметр — ?tmpl=component .
Код инициализации:
// Тип Ajax - загрузка контента в модальном окне $(".simple-ajax-popup").magnificPopup({ type: "ajax" });
Важное замечание! Загружаемый контент должен быть обернут блочными тегами так, чтобы был только один корневой элемент. Иначе, ваше окно будет закрываться по клику в любой его части.
Форма в модальном окнеВ данном случае форма будет загружаться с типом контента «inline «. В этом случае вы сможете спросить — а чем она отличается от первого варианта, где мы показывали просто текст? Ведь вместо теста мы можем вставить код формы. Да, все правильно, вместо текста будет просто код формы с дополнительной опцией в инициализации. Данная опция будет ставить фокус на определенном поле при загрузке формы. А это в свою очередь удобство. Лично мне нравится, что при открытии, скажем, формы поиска фокус сразу идет на поле ввода ключевого запроса.
// Форма в модальном окне с фокусом на поле Имя $(".popup-with-form").magnificPopup({ type: "inline", focus: "#name" }); Открыть форму в модальном окне
В данном случае при открытии формы фокус срабатывает на поле с id=»name» — Имя.
Диалоговые модальные окнаЧем данное окно отличается от предыдущих с типом inline ? Практически ничем, за исключением того, что данное окно не закрывается по клику на затемненной области. Также скрыта кнопочка с крестиком. Для закрытия мы будет использовать другой объект. Таким образом можно создавать диалоговые окна на сайте.
// Диалоговое окно $(".popup-modal").magnificPopup({ type: "inline", preloader: false, modal: true }); $(document).on("click", ".popup-modal-dismiss", function(e) { e.preventDefault(); $.magnificPopup.close(); });
Здесь, как видим, используются дополнительные опции. О некоторых из них мы поговорим ниже.
Открыть модальное окно
Закрыть
Диалоговое окноYou won"t be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.
Опции плагинаТеперь давайте рассмотрим некоторые опции плагина Magnific Popup.
mainClassТип
— string (строка)
По умолчанию
— empty
Данной опцией мы можем задать класс общему родительскому блоку всплываемого контента. Исходя из этого мы можем задать свое оформление конкретному окну. Также класс присваивается и блоку с затемненным фоном. Опять таки, можем задать цвет не черный, а скажем, белый. Здесь уже ваш полет фантазии расширяется.
Также, отталкиваясь от присваиваемого класса, мы можем задавать различные эффекты всплывания окна. Делается это все на CSS. Давайте зададим анимацию первому модальному окну, рассмотренного в данной статье выше. Это окно с текстом.
Создадим отдельную инициализацию с возможностью анимации.
// Модальное окно с эффектом ZoomIn $(".popup-with-zoom-anim").magnificPopup({ type: "inline", removalDelay: 300, mainClass: "my-mfp-zoom-in" });
Создадим правила анимации в CSS
/** * Fade-zoom animation for first dialog **/ /* start state */ .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /** * Fade-move animation for second dialog */ /* at start */ .my-mfp-slide-bottom .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg); -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg); -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg); -o-transform: translateY(-20px) perspective(600px) rotateX(10deg); transform: translateY(-20px) perspective(600px) rotateX(10deg); } /* animate in */ .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: translateY(0) perspective(600px) rotateX(0); -moz-transform: translateY(0) perspective(600px) rotateX(0); -ms-transform: translateY(0) perspective(600px) rotateX(0); -o-transform: translateY(0) perspective(600px) rotateX(0); transform: translateY(0) perspective(600px) rotateX(0); } /* animate out */ .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog { opacity: 0; -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg); -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg); -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg); -o-transform: translateY(-10px) perspective(600px) rotateX(10deg); transform: translateY(-10px) perspective(600px) rotateX(10deg); } /* Dark overlay, start state */ .my-mfp-slide-bottom.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-slide-bottom.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-slide-bottom.mfp-removing.mfp-bg { opacity: 0; }
Вызвать окно с текстом
С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение направлений прогрессивного развития.
Если заметите в коде инициализации мы использовали дополнительную опцию — removalDelay . Без данной опции анимация срабатывать не будет.
removalDelayТип
— integer
По умолчанию
— 0
Задержка удаления Popup из DOM. Значение соответствует миллисекундам.
preloaderТип
— boolean
По умолчанию
— true
Индикатор текущего состояния. По умолчанию при загрузке контента выводится надпись — Loading… Если опция включена, она всегда присутствует в DOM, меняется только текст внутри него. В зависимости от состояния у блока меняется класс. В CSS мы можем задать разное оформление. Вот список классов:
/* Процесс загрузки */ .mfp-s-loading { } /* Удачная загрузка */ .mfp-s-ready { } /* Загрузка с ошибкой */ .mfp-s-error { }
closeBtnInsideТип
— boolean
По умолчанию
— true
Если включено, скрипт добавляет кнопку с крестиком в контейнер popup окна. Если вам нужно, чтобы она была за пределами модального окна, то достаточно передать значение — false
closeBtnInside: false
closeOnBgClickТип
— boolean
По умолчанию
— true
Закрывает модальное окно по клику на затемненной области.
alignTopТип
— boolean
По умолчанию
— false
Если включено, выравнивает окно по верхнему краю, а не по центру. Выравнивание работает с помощью добавления класса — mfp-align-top .
disableOnТип
— integer
По умолчанию
— null
Отключает действие, если максимальная ширина окна браузера равна заданному значению. Может принимать и функцию, которая должна вернуть правду или ложь.
DisableOn: 768 или disableOn: function() { if($(window).width() < 600) { return false; } return true; }
Это далеко не все опции плагина. Я выбрал лишь некоторые из них, которые сам использую. Если брать все во внимание, то статья получится слишком большой. Вы можете расширить этот список самостоятельно, если заглянете в документацию на официальном сайте.
Я надеюсь вы поняли каковы возможности Magnific Popup. Лично я сам еще не все возможности данного плагина изведал. Даже сейчас по ходу написания данной статьи я открыл для себя новые возможности Magnific.
Напоследок хочу дать вам ссылку на Codepen автора с некоторыми примерами Magnific Popap — http://codepen.io/collection/nLcqo/ . Все, на этом и завершу.
Надеюсь вам данная статья пригодится. Всем спасибо за внимание. На связи был Заур Магомедов. До встречи в следующих постах!
Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.
Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появляться
$(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();
});
});
Внешние popup окна с рекламой – это ужасные идеи! Все здравомыслящие вебмастера, никогда не посоветуют вам использовать их на сайте. Но, если речь идет о внутренних popup окнах – это полезный элемент, который дает дополнительную информацию, предупреждает, предотвращает, дает возможность выбора и многое другое.
Что мы создадим?В этом уроке мы создадим простое и красивое popup окно на jquery. Оно будет похоже на то, что используется в twitter. Естественно, вы сможете придать стиль, какой вам по душе.
Каким функционалом будет обладать окно?Для реализации popup окна, мы будем использовать CSS и несколько строк jQuery кода, ну и само собой HTML. Заметьте, что для воплощения нашей идеи, не нужно никаких плагинов и дополнительных инструментов, все очень просто и надежно!
Click me X Some Title Goes Here: Some more content, for when you want to add a little bit more
Popup-box { position: absolute; border-radius: 5px; background: #fff; display: none; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); font-family: Arial, sans-serif; z-index: 9999999; font-size: 14px; } .popup-box .close { position: absolute; top: 0px; right: 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; cursor: pointer; color: #434343; padding: 20px; font-size: 20px; } .popup-box .close:hover { color: #000; } .popup-box h2 { padding: 0; margin: 0; font-size: 18px; } .popup-box .top { padding: 20px; } .popup-box .bottom { background: #eee; border-top: 1px solid #e5e5e5; padding: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #blackout { background: rgba(0,0,0,0.3); position: absolute; top: 0; overflow: hidden; z-index: 999999; left: 0; display: none; }
Мы определим некоторые другие CSS стили в JavaScript коде. Эти стили требуют дополнительных вычислений, поэтому лучше будет сделать это с помощью jQuery. Давайте перейдем к javascript коду.
jQuery код popup окнаДля начала, подключите jQuery файл библиотеки. После чего, инициализируем jQuery и добавляем div #blackout в тело документа. Также определяем ширину popup окна.
$(document).ready(function() { $("body").append(""); var boxWidth = 400;
Далее, создаем функцию, которая центрирует окно. Ранее мы установили absolute позиционирование в CSS, мы не можем использовать margin: 0px auto; нам необходимо определить ширину экрана, отнять от этого ширину popup окна, и все это разделить на 2. Высотой будет текущая позиция скролла, плюс где-то 150px.
Немного ранее мы создавали #blackout div, это для накрытия тенью контента страницы. Теперь нам нужно убедиться, что этот блок будет иметь ширину и высоту идентичную монитору. Это также рассчитывается в этой функции.
function centerBox() { /* определяем нужные данные */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); /* Вычисляем позицию */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150; /* Добавляем стили к блокам */ $(".popup-box").css({"width" : boxWidth+"px", "left" : disWidth+"px", "top" : disHeight+"px"}); $("#blackout").css({"width" : winWidth+"px", "height" : winHeight+"px"}); return false; }
Эта функция должна запускаться 3 раза. Когда пользователь использует скроллинг, когда пользователь изменяет размер окна, также изначально, когда загружается страница.
$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();
В конце, нам нужно установить события кликов. Когда пользователь кликает в область вне окна, оно должно закрыться. Когда пользователь нажал на «X», окно также должно исчезнуть. В случае кликов внутри popup окна, ничего не должно происходить. В коде добавлены комментарии, чтобы проще было разобраться.
$("").click(function(e) { /* Предотвращаем действия по умолчанию */ e.preventDefault(); e.stopPropagation(); /* Получаем id (последний номер в имени класса ссылки) */ var name = $(this).attr("class"); var id = name; var scrollPos = $(window).scrollTop(); /* Корректный вывод popup окна, накрытие тенью, предотвращение скроллинга */ $("#popup-box-"+id).show(); $("#blackout").show(); $("html,body").css("overflow", "hidden"); /* Убираем баг в Firefox */ $("html").scrollTop(scrollPos); }); $("").click(function(e) { /* Предотвращаем работу ссылки, если она являеться нашим popup окном */ e.stopPropagation(); }); $("html").click(function() { var scrollPos = $(window).scrollTop(); /* Скрыть окно, когда кликаем вне его области */ $("").hide(); $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); }); $(".close").click(function() { var scrollPos = $(window).scrollTop(); /* Скрываем тень и окно, когда пользователь кликнул по X */ $("").hide(); $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); }); });
На этом, создание popup окна на jQuery завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Вы можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.
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» 7. jQuery всплывающая панель сверху экрана 8. jQuery всплывающее окноjQuery плагин для отображения формы обратной связи во всплывающем окне.
10. MooTools плагин «LightFace» для реализации диалоговых окон FacebookДиалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.
11. jQuery модальное окноАккуратное всплывающее диалоговое окно на jQuery.
12. Модальные окна jQueryСимпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.
13. Модальные окна jQueryВсплывающие модальные окна нескольких видов. Для просмотра плагина в действии нажмите на ссылку на демонстрационной странице.
15. Всплывающее поверх страницы сообщениеСообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.
16. Модальное окно «ModalBox» на javascriptРеализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.
17. «Leightbox» плагин с использованием библиотеки PrototypeПлагин для отображения контента в модальных окнах.