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

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

Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert() .

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента (или любого другого элемента) и его оформление:

Название документа .okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; } Всплывающее окошко! Попробовать »

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

Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »

Используя псевдо-класс:target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента сменится с none на block .

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

#okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*позиционируем и центрируем*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

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

Всплывающее окошко!

Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:

Название документа #main { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #main:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »

У элемента убираем display: none; (он больше не нужен, так как скрываем мы теперь ). В итоге родительский выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.

На этом создание простого всплывающего окна закончено.

Модальное окно

Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно

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

Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #okno:target {display: block;} .close { display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; } .close:hover {background: #e6e6ff;} Всплывающее окошко!
Закрыть окно Вызвать всплывающее окно Попробовать »

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :

Всплывающее окошко!
Закрыть окно

Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.

У дочернего убираем display: none; (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

Название документа #zatemnenie { background: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; } #zatemnenie:target {display: block;} .close { display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; } .close:hover {background: #e6e6ff;} Всплывающее окошко!
Закрыть окно Вызвать всплывающее окно Попробовать »

Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).

23.1K

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

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

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

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

• Открывающиеся на переднем плане (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 . Этот язык даёт очень многое, модифицирует и делает лучше любой проект. Но писать на чистом JS порой бывает трудно и долго. Для значительного облегчения объёма работы и времени потраченного на неё, была создана библиотека jQuery . Сегодня мы рассмотрим пример использования jQ , и сделаем всплывающее окно (довольно полезное и красивое дополнение к сайту).

Для начала напишем HTML код:

Popup Show




Отправить письмо

Сообщение:

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

Textarea {
width: 100%;
resize: none;
}

/* Ставим кнопку по центру */

Content {
text-align: center;
}

/* Стили для нашей кнопки */

Button {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
border: 0;
}

Button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}

Button:focus {
outline: none !important
}

/* Стили для содержимого popup окна */

Input, textarea {
color: #494949;
border: 1px solid #e3e3e3;
border-radius: 3px;
background: #fff;
font-size: 14px;
margin: 0 0 10px;
padding: 5px;
width: 100%;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
}

Input:focus {
border-color: #808080;
outline: none;
}

Textarea:focus {
border-color: #808080;
outline: none;
}

/* Кнопка */

Blue_btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}

Overlay_popup {
display:none;
position:fixed;
z-index: 999;
top:0;
right:0;
left:0;
bottom:0;
background:#000;
opacity:0.5;
}

Popup {
display: none;
position: relative;
z-index: 1000;
margin:0 25% 0 25%;
width:50%;
}

/* Ещё немного стилей для popup окна */

Object{
width: 500px;
height: 500px;
background-color: #eee;
padding: 50px 70px;
}

Отлично! Красивая кнопка, приличный блок (pop-up окно) и пока что, бесполезный блок с затемнением. Осталось написать только небольшой кусок кода - и всё прекрасно!

$(".show_popup").click(function() { // Вызываем функцию по нажатию на кнопку
var popup_id = $("#" + $(this).attr("rel")); // Связываем rel и popup_id
$(popup_id).show(); // Открываем окно
$(".overlay_popup").show(); // Открываем блок заднего фона
})
$(".overlay_popup").click(function() { // Обрабатываем клик по заднему фону
$(".overlay_popup, .popup").hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})

Задавайте вопросы и высказывайте своё мнение в комментариях!

Продолжая серию статей "для начинающих", хочу рассказать про верстку модальных окон.

На всякий случай поясню, что под модальными (popup) окнами понимаются слои, которыенакладываются на все остальные и требуют какого-либо действия от пользователя - что-то ввести, что-то подтвердить или отклонить и т.д. Тоесть функционально это либо "отдельное окно" внутри основного окна или alert\confirm окно.

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

В общем виде html-код страницы с popup_ом будет иметь вид:

popup

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

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

/*Затемнение */ .overflow{ background: rgba(0, 0, 0, 0.7); position:fixed; top: 0px;bottom: 0px; left: 0px;right: 0px; z-index:100; display:none; } /* модальное окно */ .popup{ position:absolute; z-index:101; background: #ffffff; width: 600px; min-height: 300px; margin-left: -300px; top: 10%; left: 50%; display:none; } .popup .close{ position:absolute; top: 10px; right: 10px; display:block; width: 17px; height: 17px; opacity: 0.5; background: url(../img/close.png) no-repeat center; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; transition:opacity 0.5s; } .popup .close:hover{ opacity: 0.8; }

А теперь давайте приступим к обработке событий открытия и закрытия нашего окна:

Var win_top = 0; $(document).ready(function(){ // открываем модальное окно при клике по контенту $("#list").click(function(){ popup_open("#myPopup"); }) // открываем модальное окно сразу при загрузки страницы popup_open("#myPopup"); // Добавляем обработчик закрытия модального окна $(document).on("click", ".popup .close, .overflow", function(){ popup_close() return false; }) }) function popup_open(selector){ if (selector.length){ win_top = $(window).scrollTop(); $("#list").css({ "position" : "fixed", "left" : "0", "right" : "0", "top" : "0", // Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь "margin-top": "-"+win_top+"px" }) $(".overflow,"+selector).fadeIn(); } } function popup_close(){ $(".overflow, .popup").hide(); $("#list").css({ "position" : "static", "margin-top": "0px" }) // Возвращаем скролл на место $(window).scrollTop(win_top); }

Здесь в качестве параметра передается селектор (id) попапа. Такой подход удобен, если на странице есть несколько попапов, которые вызываются кликом по ссылкам. тогда в атрибуте href ссылки можно прописать id блока, который нужно открыть в виде якоря:
href="#myPopup" и при обработки клика смотреть значение данного атрибута

Var id = $(this).attr("href");

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

@media screen and (max-width: 650px) { .popup{ width: auto; margin-left: 0px; top: 40px; left: 10px; right: 10px; } }

Обзоры