Создаём всплывающее модальное окно jQuery. Модальные окна с размытым фоном на CSS3 MooTools плагин «LightFace» для реализации диалоговых окон Facebook


3. Пример модального окна jQuery, вызванного по ссылке (с Демо)

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

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


$(document).ready(function()
{
alert("Текст во всплывающем окне");
});

Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:


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


$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});

Вызов модального окна jQuery по ссылке с CSS Следующим шагом будет создание модального окна при нажатии по ссылке. Фон при этом будет медленно затемняться.


Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем 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();
});
});

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

В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью 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 , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.

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

Давайте посмотрим, как это сделать:

HTML

Начнем с добавления тегов со следующими атрибутами:

  • href - #?w=500 указывает ширину окна
  • rel – уникальный атрибут для каждого окна
  • class="poplight" – класс для показа всплывающего окна
< a href= "#?w=500" rel= "popup_name" class = "poplight" > См. Окно в действии - Ширина = 500px

См. Окно в действии - Ширина = 500px

Затем нам необходимо создать встроенную разметку для всплывающего окна. Разместить можно в любом месте страницы, ну например в нижней части содержания. Обратите внимание, что идентификатор всплывающего окна соответствует атрибуту rel тега
Это и будет связывать ссылку и всплывающее окно вместе.

Заголовок

Любой текст,что душе угодно

И так, с размещением нашего окна на странице мы разобрались, теперь давайте оформим его с помощью стилей, придадим ему, так сказать, благопристойный вид.

CSS Вёрстка

Для пущей ясности, я прописал некоторые пояснения к параметрам стиля нашего окошка. Так как всплывающие окна могут иметь разный размер, мы не указываем в CSS popup_block края окна, вычислить необходимый размер, это как раз задача для .

#fade { display : none ; /*--по умолчанию скрыто--*/ background : rgba (7 , 87 , 207 , 0.8 ) ; position : fixed ; left : 0 ; top : 0 ; width : 100% ; height : 100% ; opacity : .80; z-index : 9999 ; } .popup_block { display : none ; /*--по умолчанию скрыто--*/ background : #fff ; padding : 20px ; border : 8px solid rgb (134 , 134 , 134 ) ; float : left ; font-size : 85% ; position : fixed ; top : 50% ; left : 50% ; color : #000 ; max-width : 750px ; min-width : 320px ; height : auto ; z-index : 99999 ; /*--CSS3 тень блока--*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 скругление углов--*/ -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; } .popup_block p { font-weight : 400 ; padding : 0 ; margin : 0 ; color : #000 ; line-height : 1.6 ; } .popup_block h2 { margin : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ; font-weight : 400 ; text-align : center ; text-shadow : 1px 1px 2px #0D0C0C ; } /* формируем кнопку закрытия */ .close { background-color : rgba (61 , 61 , 61 , 0.8 ) ; border : 2px solid #ccc ; height : 25px ; line-height : 20px ; position : absolute ; right : -17px ; font-weight : bold ; text-align : center ; text-decoration : none ; padding : 0 ; top : -17px ; width : 25px ; -webkit-border-radius: 50% ; -moz-border-radius: 50% ; -ms-border-radius: 50% ; -o-border-radius: 50% ; border-radius : 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; } .close : before { color : rgba (255 , 255 , 255 , 0.9 ) ; content : "X" ; font-size : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; } .close : hover { background-color : rgba (252 , 20 , 0 , 0.8 ) ; } .shadow { box-shadow : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 10px #857373 ; -moz-box-shadow: 4px 4px 10px #857373 ; padding : 0 ; } /*--фиксированное позиционирование для IE6--*/ * html #fade { position : absolute ; } * html .popup_block { position : absolute ; }

#fade { display: none;/*--по умолчанию скрыто--*/ background: rgba(7, 87, 207, 0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block { display: none; /*--по умолчанию скрыто--*/ background: #fff; padding: 20px; border: 8px solid rgb(134, 134, 134); float: left; font-size: 85%; position: fixed; top: 50%; left: 50%;color: #000; max-width: 750px; min-width: 320px; height: auto; z-index: 99999; /*--CSS3 тень блока--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 скругление углов--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .popup_block p { font-weight: 400; padding: 0; margin: 0; color: #000; line-height: 1.6;} .popup_block h2 { margin: 0px 0 10px; color: rgb(43, 43, 43); font-weight: 400; text-align: center; text-shadow: 1px 1px 2px #0D0C0C; } /* формируем кнопку закрытия */ .close { background-color: rgba(61, 61, 61, 0.8); border: 2px solid #ccc; height: 25px; line-height: 20px; position: absolute; right: -17px; font-weight: bold; text-align: center; text-decoration: none;padding: 0; top: -17px; width: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-size: 12px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(252, 20, 0, 0.8); } .shadow { box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz-box-shadow:4px 4px 10px #857373; padding:0; } /*--фиксированное позиционирование для IE6--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; }

С формированием окна и его внешнего вида с помощью css, думаю особых сложностей не возникнет. Стили можете прописать непосредственно на странице HTML, между тегами и , а можете вынести в отдельный файл ваших стилей, обычно это файл style.css , или что-то в этом роде.

Настройка JQuery

Для полноценной работы модального окна, необходимо подключить jQuery, кто не знаком с работой этой библиотеки можете прочитать .

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

В следующем шаге рассмотрим начинку и функции плагина jquery, для активации нашего всплывающего окна, код содержит некоторые пояснения, для лучшего понимания того, что мы делаем.

Плагин JQuery
$(document) . ready(function () { //При нажатии на ссылку с классом poplight и href атрибута тега с # $("a.poplight" ) . click(function () { var popID = $(this) . attr("rel" ) ; //получаем имя окна, важно не забывать при добавлении новых менять имя в атрибуте rel ссылки var popURL = $(this) . attr("href" ) ; //получаем размер из href атрибута ссылки //запрос и переменные из href url var query= popURL. split ("?" ) ; var dim= query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; //первое значение строки запроса //Добавляем к окну кнопку закрытия $("#" + popID) . fadeIn() . css({ "width" : Number( popWidth ) } ) . prepend("" ) ; //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css var popMargTop = ($("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; //Устанавливаем величину отступа $("#" + popID) . css({ "margin-top" : - popMargTop, "margin-left" : - popMargLeft } ) ; //Добавляем полупрозрачный фон затемнения $("body" ) . append("" ) ; //div контейнер будет прописан перед тегом . $("#fade" ) . css({ "filter" : "alpha(opacity=80)" } ) . fadeIn() ; //полупрозрачность слоя, фильтр для тупого IE return false ; } ) ; //Закрываем окно и фон затемнения $(document) . on("click" , "a.close, #fade" , function () { //закрытие по клику вне окна, т.е. по фону... $("#fade , .popup_block" ) . fadeOut(function () { $("#fade, a.close" ) . remove() ; //плавно исчезают } ) ; return false ; } ) ; } ) ;

$(document).ready(function(){ //При нажатии на ссылку с классом poplight и href атрибута тега с # $("a.poplight").click(function() { var popID = $(this).attr("rel"); //получаем имя окна, важно не забывать при добавлении новых менять имя в атрибуте rel ссылки var popURL = $(this).attr("href"); //получаем размер из href атрибута ссылки //запрос и переменные из href url var query= popURL.split("?"); var dim= query.split("&"); var popWidth = dim.split("="); //первое значение строки запроса //Добавляем к окну кнопку закрытия $("#" + popID).fadeIn().css({ "width": Number(popWidth) }).prepend(""); //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80) / 2; //Устанавливаем величину отступа $("#" + popID).css({ "margin-top" : -popMargTop, "margin-left" : -popMargLeft }); //Добавляем полупрозрачный фон затемнения $("body").append(""); //div контейнер будет прописан перед тегом . $("#fade").css({"filter" : "alpha(opacity=80)"}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE return false; }); //Закрываем окно и фон затемнения $(document).on("click", "a.close, #fade", function() { //закрытие по клику вне окна, т.е. по фону... $("#fade , .popup_block").fadeOut(function() { $("#fade, a.close").remove(); //плавно исчезают }); return false; }); });

Заключение:

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

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

Обновление : Версия dm-modal.js v1.3 (15.01.2017)
Исправлено : Заменена устаревшая функция.live() , используется синтаксис href*=\\# . Теперь плагин работает с актуальными версиями библиотеки jQuery

На этом всё! Надеюсь, получился еще один полезный урок.

С Уважением, Андрей

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

Модальные окна с размытым фоном на CSS3

Экономические известия лучшие только тут: Дробаха

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

Шаг 1. HTML

У нас будет контейнер, в котором будет содержаться: заголовок, описание, затем мы добавляем класс для кнопки с классом toggleModal для открытия модального окна:

Заголовок

Описание

Открыть статью Заголовок для окна

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

Закрыть

Затем нам необходимо добавить класс modal is-active , данный класс будет отвечать за вызов модального окна, modal__header отвечает за заголовок и его стилизацию окна.

Шаг 2. CSS

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

Button { background: none; background-clip: padding-box; display: inline-block; border: 0; user-select: none; -webkit-touch-callout: none; -webkit-appearance: button; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

Container { position: relative; margin:0 auto; max-width: 960px; box-sizing: border-box; padding-top: 40px; }

article { background: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px; } .modal { display: none; position: fixed; top: 50%; width: 100%; height: auto; margin-top: -150px; background-color: $color-white; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px darken($color-bg, 10%); @media #{$small} { left: 50%; margin-left: -260px; max-width: 520px; } &.is-active { display: block; animation: 1s linear slide; } .inner { position: relative; padding: 20px; } } .modal__header { border-bottom: 1px solid darken($color-bg, 5%); } .modal__footer { text-align: center; button { display: inline-block; } }

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

Шаг 3. JS

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

$("body").addClass("is-blurred"); $(".toggleModal").on("click", function (event) { event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass("is-blurred"); });

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

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

Плагин для отображения контента в модальных окнах.

mob_info