Всплывающее окно jquery по клику. Модальное окно на jQuery с формой отправки письма. Модальное окно «ModalBox» на javascript
В статье о создание модального окна на css мы разобрали что такое модальное окно и зачем оно нужно. А так же создали окно используя только css. В этой статье я опишу как создать модальное окно javascript. А конкретнее мы будем для создания использовать библиотеку jquery.
И так начнём создавать модальное окно на jquery. Для усложнения задачи поставим такое условие. Нам нужно будет создать адаптивное модальное окно. А адаптивность будет заключаться в том, что окно при уменьшении размера экрана то же будет уменьшаться. Адаптивное модальное окно jquery начнём создавать с html разметки.
Жми здесь! X Заказать звонок
С кодом я думаю всё понятно. Имеем оболочку.wraper, где находится контент нашего сайта. Есть кнопка вызова модального окна с идентификаторм gowindow, само окно с ид modal_window и перекрывающий слой myoverlay. Напишем теперь css стили.
Wraper { width: 100%; margin: auto; width: auto;/*то же что и 100%*/ max-width: 960px;/*максимальная ширина обёртки*/ border: 1px solid #000; background-color: #F5F9FB; } .button{ /*-------*/ } #modal_window { width: 34%;/*для адаптивности*/ height: 300px; border-radius: 10px; border: 3px #fff solid; background: #e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; /*полная прозрачность для анимации */ z-index: 5000; /*окно должно быть верхним слоем*/ padding-top: 20px; text-align: center; position: relative; } #modal_window #window_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #myoverlay { z-index: 3000; /*выше всех слоёв но ниже окна */ position: fixed; /*для перекрытия сайта*/ background-color: #000; opacity: 0.5; width: 100%; height: 100%; /*полностью на экран */ top: 0; left: 0; cursor: pointer; display: none; }
Опишем css код. Блок.wraper задаём адаптивным, он меняется от размера экрана но не более 960px. Код кнопки показывать не буду. Ширину окна #modal_window задаём в процентах, ширина будет зависеть от ширины.wraper. Для центровки окна задаём марджин 33%. Он расчитывается так 50%-17%, где 17% половина ширины окна. Скрываем окно свойствами display: none и opacity: 0. С кодом #window_close и #myoverlay я думаю всё ясно. Давайте теперь напишем код для jquery. Будем считать что jqery уже подключена.
$(document).ready(function() { $("#gowindow").click(function(){//клик по кнопке $("#myoverlay").fadeIn(400, //показываем перекрывающий слой function(){ $("#modal_window") .css("display", "block") //делаем окно видимым.animate({opacity: 1, top: "50%"}, 200); //увеличиваем прозрачность, окно плавно съезжает }); }); /* убираем окно */ $("#window_close, #myoverlay").click(function(){ //нажатие по перекрывающему слою или кресту $("#modal_window") .animate({opacity: 0, top: "45%"}, 200, //вкл прозрачность, окно идёт вверх function(){ $(this).css("display", "none"); //делаем окно невидимым $("#myoverlay").fadeOut(400); //убираем слой перекрытие }); }); });
Js код я думаю в объяснении не нуждается, так как я его достаточно хорошо прокомментировал. На этом я думаю всё, так что подведём итоги. Мы сделали простое адаптивное модальное окно jquery
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();
});
});
Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.
В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью 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 , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
Сегодня мы разберемся с вами как делать всплывающее окно 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 соответственно).
