Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.

Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на 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; }

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

О которых было упомянуто выше.

Говоря о преимуществах можно выделить несколько ключевых:

  • Легко настраиваемый внешний вид (в архиве вы найдёте 2 темы: по умолчанию и bootstrap);
  • Красиво выезжающие Growl-like уведомления после отклика на alert-ы, которые можно использовать как обратную связь с пользователем;
  • Использует только JavaScript возможности и не требует подключения сторонних библиотек;
  • Кросс-браузерность;
  • У alertify есть своя полная документация .

Достоинств уже достаточно на твердую четверку, плюс каждый отметит что-нибудь для себя. Меня же особо порадовали мини-уведомления, которые не всегда встретишь в готовых скриптах модальных окон. Ну и весит alertify совсем немного. Сейчас почти на любом сайте навешано множество сторонних скриптов и библиотек, таких как jQuery и MooTools, а это, зачастую, лишняя нагрузка на страницы.

Если вы, за время чтения вступления ещё не успели просмотреть примеры, которые я подготовил, то предлагаю изучить их и опробовать. На странице демо хорошо видно, как работает JavaScript всплывающих окон и его легкость в использовании. Мы же сейчас продолжим разбираться с alertify и, для начала, подключим сам плагин и его стили:

Скрипт добавим в конце страницы:

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

В этом объекте есть ещё два подобъекта, которыми мы и будем пользоваться для реализации наших модальных окон и уведомлений. В самом начале статьи я сказал, что данный скрипт самодостаточен и это так! К примеру, нам не нужно писать длинный вариант поиска элемента по id в DOM дереве – воспользуемся просто методом get(). Два других метода on() и off() как в jQuery, делают ровным счётом то же самое – навешивание событий на элементы или их удаление.

Теперь мы напишем вступительный кусок кода, в котором спрячем длинные обращения к методам и объектам:

Var d = Alertify.dialog, l = Alertify.log, $ = Alertify.get;

Вот так будет гораздо удобнее. В своих примерах я не буду пользоваться методом on(), а воспользуюсь onclick для наглядности. Добавим HTML разметку для нашего первого alert-а:

Alert Dialog

Воспользуемся плагином:

$("alert").onclick = function(){ d.alert("Текстовое сообщение в модальном окне alert"); return false; };

Для создания модального окна confirm() так же добавим HTML:

Confirm Dialog

И воспользуемся соответствующим кодом:

$("confirm").onclick = function(){ d.confirm("Текстовое сообщение в модальном окне confirm", function(){ // При нажатие на "OK" }, function(){ // При нажатие на "Cancel" }); return false; };

Остался у нас prompt(), добавляем HTML:

Prompt Dialog

И сам JavaScript код:

$("prompt").onclick = function(){ d.prompt("Текстовое сообщение в модальном окне prompt", function(str){ // При нажатие на "OK" // str - принимаемое значение в окне }, function(){ // При нажатие на "Cancel" }, "Значение по умолчанию"); return false; };

Как видите основные модальные окна, мы рассмотрели и вряд ли с ними могут возникнуть трудности, а теперь перейдем к уведомлениям. Собственно, уведомления реализованы через объект log. И тут несколько вариантов как использовать, первый обычное сообщение:

L.info("Обычное выдвижное сообщение");

Сообщение об успешном событии:

L.success("Успешное уведомление");

Об ошибке:

L.error("Произошла ошибка заполнение формы");

Вот мы и настроили красивые alert-ы и уведомления у себя в проекте. Надеюсь, данное решение вам пригодится в своей работе и практике, а на этом у меня всё.

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

А такая ли гадина эти ваши всплывающие окна?

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

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

  • Открывающиеся на переднем плане (pop-up ) – всплывают поверх основного;
  • Открывающиеся на заднем плане (pop-under ) – открываются за основным окном.

Последние являются самыми коварными. Они становятся активными и видными для пользователя лишь после закрытия основного. Поэтому определить их источник и вовремя блокировать не удастся.

Средства борьбы

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

Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:

  • Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
  • Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
  • Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.

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


Создание всплывающих окон с помощью javascript

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

  • Метод alert() – выводит на экран обычное текстовое сообщение. Чтобы скрыть диалог после прочтения, нужно нажать на кнопку «Ok » внизу окна;
  • Метод confirm() – подобен предыдущему методу. Но выводимый им диалог кроме «Ok » снабжен еще и кнопкой «Cancel ». С их помощью пользователь может принять или отказаться от условия, указанного в окне;
  • Метод prompt() – служит для вызова еще одной разновидности всплывающего окна javascript . В отличие от упомянутых выше это окно снабжено еще и текстовым полем. В него пользователь может вводить текстовые данные, которые можно присвоить значению нужной переменной.

Действие всех трех методов и вызываемые ими разновидности диалога показаны на изображении:


Но это всего лишь разновидности диалогов. Для создания настоящего всплывающего окна в javascript используется метод open() объекта window .

Вот полный синтаксис метода:

win = window. open (url, name, params) , где:

  • url – это адрес страницы, которая откроется в новом окне;
  • Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
  • Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.

На изображении ниже показано действие метода и приведен упрощенный скрипт всплывающего окна:


Создается функция f1 , в теле которой реализован вызов метода window. open() . Затем идет вызов этого метода с одним параметром, указывающим адрес страницы, которая откроется в созданном окне. После этого вызывается метод setTimeout() . В качестве параметров ему передается функция f1 и интервал времени, через который откроется новое окно.

Создание всплывающего окна с помощью CSS

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


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

Обзор остальных технологий

Совсем не обязательно разрабатывать всплывающее окно самостоятельно. Сейчас для этого создано много бесплатных плагинов на jquery . Подключив один из них, вы получите готовое окно.

Также существует множество плагинов для популярных CMS . В их состав может входить целый набор окон. Дизайн и функционал каждого из них «заточен» под выполнение определенной задачи (регистрация, отправка сообщения и другое ).

Также существует несколько популярных скриптов. Пример одного из них будет приведен ниже. По такому принципу работают всплывающие окна в контакте и других популярных социальных сетях:

Как сделать всплывающее окно на Jquery $(document).ready(function(){ PopUpHide(); }); function PopUpShow(){ $("#window-popup").show(); } function PopUpHide(){ $("#window-popup").hide(); } .box { width: 400px; height: 300px; background-color: #ccc; margin:0px auto; padding:10px; font-size:40px; color: #fff; } .popup { width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .popup .popup-content { margin:40px auto 0px auto; width:200px; height: 80px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } Пример всплывающего окна
Показать попап Поздравляю вы сделали всплывающее окно!!! Скрыть попап

Код приведен в варианте «для ленивых ». Вставив его в любой редактор и запустив на выполнение, вы получите готовый пример всплывающего окна на основе jquery .

Доброго времени суток всем читателям данной статьи. Если для своего веб-сервиса вам необходимо сделать всплывающее окно, то вы нашли правильную публикацию! Сегодня я расскажу вам как создается всплывающее окно 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 раз

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

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

На некоторых форумах или блогах при входе появляется информационный блок, в котором человеку предлагают подписаться на новости портала, войти в систему или зарегистрироваться в ней. Кроме этого всплывающее окно на 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_" после нижнего подчеркивания указывается уникальное число.