Создаем модальное окно на HTML5 и CSS3. Создаем собственное всплывающее окно на javascript, css и jQuery. Какой способ выбрать
Всем нам блуждающим по просторам глобальной сети попадались на глаза сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма или же форма обратной связи.
Можно по разному относиться к таким методам подачи информации. Меня например, все эти всплывающие окна выскакивающие во время посещения какого-нибудь сайта, мягко сказать напрягают, да что там, они меня просто бесят, хочется сразу уйти, покинуть этот сайт, что в большинстве случаев я и делаю. Да и все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. Но, как мы видим, многие, очень многие веб-мастера реализуют именно такой, навязчивый способ подачи информации.
Меня больше заинтересовала техническая сторона вопроса и методы его решения. Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня вместе с вами, мы разберем детально, как проще всего реализовать всплывающее при загрузке сайта, используя в работе магию новых свойств и совсем небольшого , чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.
Для начала, не отходя от кассы, на специально приготовленной демо-странице, вы можете посмотреть на конечный результат всего того что мы будем с вами делать. В примере, в всплывающем окне я использовал текст и парочку изображений, для наглядности. Вы же в последствии сможете вставить в модальное окно все что угодно, главное не переусердствуйте)))).
Разметка HTMLРазметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id , для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида:
Модальное Окно!
|
Модальное Окно!
Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.
Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом.pl-left и.pl-right соответственно.
Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.
Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1
Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой javascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот javascript лучше всего в конце тела страницы html перед закрывающим тегом . Ну а сам скрипт состоит всего лишь из нескольких строк:
| < script type= "text/javascript" > var delay_popup = 5000 ; setTimeout("document.getElementById("overlay").style.display="block"" , delay_popup) ; |
var delay_popup = 5000; setTimeout("document.getElementById("overlay").style.display="block"", delay_popup);
В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение.
Для закрытия окна мы просто используем стандартную кнопку, тег с onclick событием и определенным классом class="close", для возможности оформления внешнего вида через стили CSS.
| < button class = "close" title= "Закрыть" onclick= "document.getElementById("overlay").style.display="none";" > |
Таким образом мы подошли к самому интересному моменту(на мой взгляд), к формированию стилей всплывающего окна.
Стили CSSДля начала, создадим идентификатор #overlay с помощью которого мы свяжем наше окно с javascript и сформируем базовый контейнер < script type= "text/javascript" src= "js/jquery.cookie.js" >
jQuery подключаете из бездонных хранилищ Google, а можно загрузить c сайта плагинов jQuery и разместить у себя на сайте в папке «js» (например).
Далее подключаете файл javaScript, содержащий код работы с cookie, или же включаете текст скрипта в HTML код с помощью тега , вот так:
| < script type= "text/javascript" > $(function () { // Проверяем запись в куках о посещении // Если запись есть - ничего не происходит if (! $. cookie("hideModal" ) ) { // если cookie не установлено появится окно // с задержкой 5 секунд var delay_popup = 5000 ; setTimeout("document.getElementById("parent_popup").style.display="block"" , delay_popup) ; } $. cookie("hideModal" , true , { // Время хранения cookie в днях expires: 7 , path: "/" } ) ; } ) ; |
$(function() { // Проверяем запись в куках о посещении // Если запись есть - ничего не происходит if (!$.cookie("hideModal")) { // если cookie не установлено появится окно // с задержкой 5 секунд var delay_popup = 5000; setTimeout("document.getElementById("parent_popup").style.display="block"", delay_popup); } $.cookie("hideModal", true, { // Время хранения cookie в днях expires: 7, path: "/" }); });
Исполняемый js лучше всего прописать перед закрывающим тегом . В данном примере я показал вариант сохранения cookie после закрытия всплывающего окна в течении семи дней, это означает, что окно будет показано пользователю при первом посещении, один раз. На протяжении последующих семи дней, или до момента пока пользователь не почистит куки своего браузера, окно показываться не будет.
Как вы понимаете, обработчик события записи cookie, вы можете привязать к любому другому элементу. Время хранения куки устанавливаете в expires: 7 (в примере это 7 дней). Задержку появления окна регулируете в функции setTimeout , по умолчанию выставил 5000, т.е окно всплывёт через 5 секунд после загрузки страницы.
Сосем немного изменил внешний вид модального окна, прикрутил простейшую анимацию появления, с помощью изменения свойства прозрачности (opacity) от 0 к 1. К демо, добавил и вариант всплывающего окошка с записью cookie, при просмотре, не забывайте, что окно в этом варианте появляется 1 раз в 7 дней, так что чистим куки))).
По поводу оформления:
Примеров создания модальных окон, накропал за последнее время на , так что смотрите, выбирайте понравившийся стиль и творите, творите...
Теперь надеюсь точно — Всё!
С Уважением, Андрей
Доброго времени суток всем читателям данной статьи. Если для своего веб-сервиса вам необходимо сделать всплывающее окно, то вы нашли правильную публикацию! Сегодня я расскажу вам как создается всплывающее окно JavaScript, css и jQuery инструментами.
В статье подробно будут рассмотрены 3 варианта написания всплывающих окон с затемненным фоном и в конце проведен анализ каждого способа. Любой понравившийся код из представленных примеров вы сможете впоследствии использовать в своих программах. А теперь за дело!
Нет, ну скажите, зачем оно вообще нужно!?На самом деле такой механизм, как всплывающие окна используются во многих . В качестве примера можно привести тот же «ВКонтакте» или другие соцсети, где при просмотре фотографий или других графических файлов пользователю открывается , выполненный как появляющееся окно.
Другим распространенным вариантом использования такого подхода являются окна с сообщениями для входящих на сайт или закрывающих его людей. Такие сообщения появляются один раз или при загрузке страницы, или после нажатия на крестик, который закрывает вкладку.
Также я уверен, что каждый из вас наблюдал картину, когда при нажатии на определенные кнопки на сервисе перед вами выскакивает окно с просьбой о регистрации. После его заполнения данные отправляются на сервер при помощи, например, php и после вам открываются все возможности сервиса.
Не могу промолчать и о третьем способе использования всплывающих окон. Это спам и реклама.
Начнем с простогоТеперь мы подошли к самим примерам. Начну я с программной реализации, выполненной при помощи css и html. Я написал приложение, в котором окно всплывает при нажатии на определенную кнопку. В ней я расположил изображение. Однако вы можете впихнуть туда любую информацию, будь то ссылки, текст, фотографии, видео, формы регистрации и так далее.
Итак, сама вмещается в несколько строк, потому что весь сок состоит в правильной стилизации.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Popup window
Нажми на меня
|
Popup window
Нажми на меня
Как видите, все очень просто. А теперь перейду к каскадным таблицам. Вот там-то кода будет много, но он опять-таки легкий.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/*Затемнение дисплея*/ .overlay { background-color: rgba(1, 0, 0, 0.77); right: 0; left: 0; position: fixed; top: 0; bottom: 0; z-index: 11; display: none; } /*Слой становится видимым*/ .overlay:target { display: block; } /*Растягиваю картинку на всю ширину попапа*/ .window img { width: 100%; } /*Характеристики самого окна, которое появляется после клика на кнопке*/ .window { left: 50%; z-index: 12; margin: 0; position: fixed; padding: 15px; border: 1px solid #383738; background: #fefeff; border-radius: 15px; box-shadow: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31); transform: translate(-50%, -450%); transition: transform 0.6s ease-out; } /*Появление модального окошка с верхнего края экрана*/ .overlay:target+.window { transform: translate(-50%, 0); top: 17%; } /*Внешний вид кнопки «Закрыть»*/ .close { top: -11px; right: -11px; width: 23px; height: 23px; position: absolute; padding: 0; border: 2px solid #ccd; border-radius: 15px; background-color: rgba(61, 61, 61, 0.81); box-shadow: 0 0 12px #010; text-align: center; text-decoration: none; font: 18px sans-serif; font-weight: bold; transition: all ease .9s; } .close:before { color: rgba(254, 254, 254, 0.89); content: "X"; text-shadow: 0 1px 3px #010; font-size: 14px; } /*Изменение характеристик при наведении на область */ .close:hover { background-color: rgba(253, 21, 0, 0.83); transform: rotate(360deg); } /*Оформление главной кнопки*/ #button { margin-left: 40%; font-size: 33px; border-radius: 11px; background-color: rgba(63, 63, 63, 0.9); box-shadow: 0 3px 10px #010; text-align: center; text-decoration: none; background: #DCDCDC; padding: 6px 17px; }
Возможности JavaScriptВ скриптовом языке встроено множество возможностей создавать всплывающие окна. Так, попапы можно вызвать при помощи стандартных функций alert, confirm и prompt.
Alert выводит простое сообщение пользователю. В прошлых публикациях я много раз использовал этот метод. Закрыть такое окно можно нажав крестик или «OK». Синтаксис выглядит следующим образом:
alert («Вот мое послание!»);
Confirm необходим для задания вопроса пользователям. Такое окошко часто можно встретить при выходе с сайта или проверке какой-либо информации о вас. К примеру:
<script> var text = confirm("Какой-то текстовый контент. Вы все прочли?");
Если в появившееся окно стандартного вида можно ввести какую-то информацию, то это prompt.
| 1 2 3 4 5 6 7 8 9 |
var isLogIn= prompt("Вы подписчик?", ""); alert("Ответ: "+isLogIn);
Помимо этого, в js у window существует метод, который позволяет загружать новые страницы и открывать новые окна. Это
window.open (“путь”, “наименование”, “параметры”)
Данный метод обладает множеством встроенных параметров. Если есть желание их разобрать, то откройте официальную документацию. А я перейду сразу к простому примеру.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | window on js |
window on js var PopUpW = window.open("", "PopUp Window", "resizable=no,scrollbars=no,width=350,height=150,copyhistory=1"); PopUpW.document.write("Много-много текстового контента!");
Благодаря такому коду всплывающее окно будет появляться сразу после загрузки страницы. Заметьте, что параметры нужно перечислять через запятую и обязательно без пробелов.
Работа с jQueryНу вот мы и добрались до библиотеки js – jQuery. Для реализации описываемого подхода я написал две функции на jq, которые отвечают за появление окна и за его закрытие.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | Нажми на ссылку X Какое-то предложение! |
/*открываю попап*/ $(document).ready(function() { $("a#start").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(250, function(){ $("#popUp") .css("display", "block") .animate({opacity: 1, top: "55%"}, 490); }); }); /*по нажатию на крестик закрываю окно*/ $("#close, #overlay").click(function(){ $("#popUp") .animate({opacity: 0, top: "35%"}, 490, function(){ $(this).css("display", "none"); $("#overlay").fadeOut(220); }); }); }); #popUp { top: 12%; left: 50%; height: 200px; position: fixed; width: 300px; border-radius: 11px; background: #fef; margin-left: -150px; margin-top: -100px; display: none; opacity: 0; padding: 17px; z-index: 6; } #popUp #close { cursor: pointer; position: absolute; width: 23px; height: 23px; top: 17px; right: 17px; display: block; } #overlay { z-index:4; background-color:#010; position:fixed; opacity:0.86; width:100%; height:100%; display:none; top:0; left:0; } Нажми на ссылку X Какое-то предложение!
Что лучше?На самом деле каждый приведенный метод отлично работает и может применяться на любых веб-сервисах. Все зависит от желания разработчика, его умений и сложности создаваемого проекта.
Поэтому экспериментируйте, изучайте новые способы реализации и не забывайте подписываться на мой блог. Я всегда рад новым подписчикам! До встречи! Пока-пока!
С уважением, Роман Чуешов
Прочитано: 721 раз
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();
});
});
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTMLПервый шаг на пути к созданию модального окна - простая и эффективная разметка:
Открыть модальное окно
Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
Открыть модальное окно X Модальное окно
Пример простого модального окна, которое может быть создано с использованием CSS3.
Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.
СтилиСоздаем класс modalDialog и начинаем формировать внешний вид:
ModalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }
Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index .
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events , но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog , так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target” .
Теперь добавляем псевдо класс :target и стили для модального окна.
ModalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }
Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окноТеперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.
Приветствую, дорогие читатели блога. Сегодня хочу предложить вашему вниманию пошаговую инструкцию с конкретными примерами по созданию красивых окошек при входе на сайт. Попытаюсь расставить все по полочкам.
Первоначально следует понять, что всплывающие окна для сайта нужны для оповещения пользователя о какой-либо важной информации или же получения от него каких-либо данных. На многих современных сайтах, особенно в интернет-магазинах, можно найти небольшие развертывающиеся диалоговые блоки, в которых посетителю ресурса предлагают обратиться в службу поддержки или оценить качество работы проекта.
На некоторых форумах или блогах при входе появляется информационный блок, в котором человеку предлагают подписаться на новости портала, войти в систему или зарегистрироваться в ней. Кроме этого всплывающее окно на html может использоваться для преграждения деятельности пользователя до определенного момента, например, чтобы принудить его отключить блокировку рекламы или заставить зарегистрироваться в системе для продолжения просмотра.
Вариантов использования всплывающих блоков целое множество. В html не предусмотрен встроенный тэг для создания полноценного объекта с настройками анимации и параметров отображения. Однако при помощи языка разметки создается базовая конструкция, которая состоит из тэгов , , , .
Все действия и анимации прописываются в javascript коде, с использованием библиотеки jquery. Чтобы отличать блоки друг от друга к тэгам дописываются метки id="" и class= "" по ним в таблице стилей будут приписываться правила отображения. Вызов блока можно осуществлять по ссылке, при нажатии на кнопку или при первичной загрузке страницы. Эти действия программируются в javascript с использованием источника событий click или onclick.
Чтобы в дальнейшем не возникло вопросов о сокращениях:
- Jq- jquery;
- Js – javascript.
Всего в материале будут рассмотрены 4 примера с использованием разных методов, в том числе с использованием встроенной dialog UI функции в jq. Также имеется 2 варианта на чистом javavscript и html.
Виджет pop-up окна для WordpressНе всем владельцам блогов или магазинов хочется возиться с различными javascript кодами. Для популярных CMS, таким как wordpress, joomla, opencard и т. п. существуют встроенные плагины.
Наиболее популярные плагины wordpress для создания появляющегося окна:
- Contact Form Pop-up;
- Ninja Popup;
- Easy Modal;
- Promotions plugin;
- Ultimited Pop-Ups.
Для Joomla :
- JCE MediaBox;
- Simple Pop-Up
Существует еще целое множество подобных аналогов, но все они выполняют одинаковую функцию. Различается только дизайн меню, в котором работает пользователь.
Как сделать всплывающее окно html с разными стилямиДавайте рассмотрим основные примеры работы с разными способами создания окон и разберем каждый пошагово.
Всплывающее окно при входе на сайтПервоначально лучше рассмотреть пример с использованием html и javascript. Первоначально нужно подключить к странице библиотеку jq. Для этого используйте команду «команда 1» . Ее нужно вставить в самое начало файла, если не выполнить подключение к библиотеке, то нужные fadeIn, fadeOut и т. п. не заработают.
Первоначально создается тэговая конструкция страницы, которая в основном состоит из блоков div. В приведенном примере javascript выводит информацию из разных объектов, поэтому можно вписывать второй div, придав ему параметр iddiv= "box_" после нижнего подчеркивания указывается уникальное число.
