Как сделать всплывающее окно с затемнением. Как сделать всплывающее окно на сайте html


Как сделать всплывающее окно с затемнением

Вы здесь: Главная - CSS - CSS Основы - Как сделать всплывающее окно с затемнением

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

Я сразу приведу код, а потом немного его прокомментирую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #parent_popup {   background: #000;   height: 100%;   opacity: 0.9;   position: fixed;   width: 100%;   z-index: 100;   top: 0;   left: 0; } #popup {   background-color: #00f;   height: 200px;   position: fixed;   top: 100px;   left: 40%;   color: #f00;   width: 300px; } </style> </head> <body> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <h2>Сайт</h2> <div>   <div>     <p>Закрыть</p>     <p>Текст в окне</p>   </div> </div> </body> </html>

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

Блок parent_popup занимается затемнением (background-color и opacity), а также выводится поверх всего остального контента (z-index: 100;).

А блок popup - это непосредственно само окно. Мы задаём его положение (top и left), а также делаем его fixed для того, чтобы он перемещался вместе с прокруткой страницы.

И, наконец, в коде есть текст "закрыть", кликнув по которому, окно будет закрыто. Это единственное место, где используется JavaScript.

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

  • Создано 13.04.2012 13:37:53
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка: <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru//images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:<a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи): [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

myrusakov.ru

Как сделать всплывающее окно на сайте - Закрыть окно по клику

В этой статье мы рассмотрим самый простой способ сделать всплывающее окно на сайте при помощи HTML и CSS. Основное преимущество этого способа состоит в отсутствии использования JavaScript и Ajax, что гарантирует работу кода даже в браузере с отключенными скриптами (например, с установленным плагином NoScript).

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

Просто вставьте в любое место документа код<div>Любой текст здесь</div>

и задайте его расположение в CSS:.fixblocks {position: fixed; /* Фиксированное положение */left: 0px; /* Расстояние от правого края окна браузера */bottom: 0px; /* Расстояние снизу*/padding: 5px; /* Поля вокруг текста */background: #ffe; /* Цвет фона */border: 1px solid #333; /* Параметры рамки */}

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

Также вы можете разместить окно в центре страницы, тогда CSS код будет такой:.fixblocks {position: fixed;top: 50%; /*Отступ от верха */left: 50%; /*Отступ от левого края */margin: -125px 0 0 -125px; /*Отступы*/background: #ffe; /* Цвет фона */border: 1px solid #333; /* Параметры рамки */}

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

Как закрыть всплывающее окно (блок, div) по клику

Если вы не хотите издеваться над посетителями сайта (например, если вы желаете показать им агрессивную рекламу, которую они не могут убрать), целесообразно добавить к всплывающему окну возможность его закрытия. Сделать это можно только с использованием скриптов.

Разместите в div специальную ссылку, в результате клика по которой будет происходить исчезновение окна:

<a title="Закрыть" href="#">Закрыть</a>

Скрыть всплывающее окно в мобильной версии: блок div только в полной версии

Также вы можете показывать всплывающее окно только в полной версии сайта. Для этого оберните всплывающее окно дополнительным блоком и установите для него параметр display:none в мобильной версии.Тогда весь код будет выглядеть следующим образом:HTML:<div><div><a title="Закрыть">Закрыть</a>Текст в окне<div></div>CSS:@media only screen and (max-width: 767px) {.nogadjet {display:none;}

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

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

seo-praktika.com

Как сделать всплывающее окно на сайте

Вы уже знаете, что такое popup - это так называемое всплывающее окно на сайте, которое выпадает сверху, или выезжает откуда-то сбоку. Как же разместить такое выпадающее окно на нашем сайте? Прежде чем рассмотреть этот вопрос, давайте разберемся, зачем нам эти popup, или всплывающие окна, на сайтах нужны?

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

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

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

Так что сейчас мы будем ставить всплывающее окно на сайт.

Для начала скачайте себе на компьютер папку с архивом всплывающего окна для сайта:

Затем распакуйте архив и проделайте следующие действия:

1. Положите папку splash_wind в папку с Вашим одностраничником.

2. Откройте файл readme.txt. Этот файл лежит в папке, которую Вы разархивировали.

Затем откройте index.html Вашего сайта и поместите туда код из файла readme.txt,  сразу после тэгов <title>...</title>.

3. После этого в папке Вашего сайта откройте: splash_wind — s_dialog — modal.js, и в этом файле измените код. Нас интересует строчка 19.

modal_wnd_path = 'splash_wind/s_dialog/templates/blue/index.html';

В этой строке, если Вам не нравится синий цвет окна, можете выбрать другой: измените слово blue на другое: green, grey, pink, purple, red или teal.

Образцы окон этих цветов Вы можете посмотреть в:

splash_wind — s_dialog — templates

4. Кодировка этих окон — utf-8. Если Вам нужна другая кодировка, меняете ее в index.html в папке templates.

5. Меняете текст нужного Вам окна, это можно проделывать в программе SharePoint Designer.

6. Подставляете в подписную форму окна данные Вашей рассылки. Для рассылок я использую SmartResponder, и поэтому покажу, как это делать, на примере этого сервиса. В Генераторе Форм сервиса SmartResponder Вы: — выбираете нужную рассылку и выделяете ее; — в коде формы берете фрагмент от самого начала до закрывающего тэга </script> и ставите его вместо соответствующего фрагмента в файле index.html Вашего окна;

 — берете тэги input, которые находятся после тэга form, и меняете такие же в файле index.html окна;

 — берете еще один тэг input, и меняете в index.html

В результате форма подписки окна будет подписывать посетителя на Вашу рассылку.

7. Размещаете Ваш одностраничник в Интернете с помощью FTP-доступа программы Dreamweaver или Total Commander.

Видео по установке всплывающего окна на сайт

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях. Это не займет много времени. Просто нажмите на ссылку ниже:     Подписаться на блог: Дорога к Бизнесу за Компьютером

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

pro444.ru

Всплывающее окно на CSS | Step For Top

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

 

.parent_popup, .parent_popup_click {

  background-color: rgba(0, 0, 0, 0.8);

  display: none;

  position: fixed;

  z-index: 99999;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

.popup, .popup_click {

  background: #fff;

    max-width: 600px;

    width:70%;

    margin: 5% auto;

padding: 5px 20px 13px 20px;

border: 10px solid #ddd;

position: relative;

/*--CSS3 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: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

 

 

.popup h3, .popup_click h3 {

    font:28px Monotype Corsiva, Arial;

    font-weight: bold;

text-align: center;

color: #008000;

text-shadow: 0 1px 3px rgba(0,0,0,.3);

}

.popup h4, .popup_click h4 {

    font:24px Monotype Corsiva, Arial;      

color: #008000;

text-align: left;

text-shadow: 0 1px 3px rgba(0,0,0,.3);

}

/* кнопка закрытия */

.close {

    background-color: rgba(0, 0, 0, 0.8);

border: 2px solid #ccc;

    height: 24px;

    line-height: 24px;

    position: absolute;

    right: -24px;

cursor: pointer;

    text-align: center;

    text-decoration: none;

color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    font-family: helvetica, arial;

    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);

    top: -24px;

    width: 24px;

-webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    -ms-border-radius: 15px;

    -o-border-radius: 15px;

    border-radius: 15px;

-moz-box-shadow: 1px 1px 3px #000;

-webkit-box-shadow: 1px 1px 3px #000;

box-shadow: 1px 1px 3px #000;

}

.close:hover {

    background-color: rgba(255, 69, 0, 0.8);

}

stepfor.top

Как сделать всплывающее окно (Pop Up) на своем сайте

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

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

Нажмите ЗДЕСЬ чтоб скачать код всплывающего окна.

Нажмите ЗДЕСЬ чтоб бесплатно скачать программу для редактирования кода вашего сайта.

Обязательно установите ее себе на компьютер. В будущем без нее никак.

Ищем FTP доступ к вашему серверу. Чтоб узнать как это сделать нажмите ЗДЕСЬ.

Запускаем программу FileZilla. Если у вас нет этой программы — вы можете бесплатно скачать ее ЗДЕСЬ.

Подключаемся к вашему серверу через FTP. Подробнее смотрите: пункт «Подключение»

Ищем в FileZilla, на вашем сервере (под папками, что находятся с правой стороны),  файл index.html.

В моем случае, я не хотел делать всплывающее окно для всего сайта, а только для файла index.html который находиться в папке «testpage» , потому открыл эту папку и нашел нужный мне index.html файл.

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

Не закрываем FilleZilla.

Открываем скаченный файл.

Распаковываем скаченный файл.

Открываем на рабочем столе скачанную и распакованную папку «arcticmodal».

Перетягиваем папку arcticmodal из открытой папки, в FileZilla, под вашим файлом index.html

Открываем правой кнопкой мыши ваш index.html файл, что в FileZilla, и пытаемся редактировать. Если редактировать не получается — копируем (перетягиваем) его из FileZilla на ваш рабочий стол.

Нажимаем на рабочем столе скопированный index.html файл , правой кнопкой мыши,  и нажимаем в меню что появилось:

Открыть с помощью NotePad++  (Edit with NotePad ++) .

 

Для примера возьмём данный сайт:

Сейчас мы открыли HTML код нашей страницы куда нам нужно будет вписать определённые код скрипта который отвечает за всплывающее окно на нашей странице. Выглядит он вот так Теперь заходим в папку распакованного ранее архива видим там файл под названием test.html его нам тоже нужно открыть редактором Notepad++ нажимаем правую кнопку и в выпавшем меню выбираем пункт Edit With NotePad++Откроется окно NotePad++ с html кодом запуска скрипта PopUp окошка выглядит он вот такДля удобства нам NotePad++ открыл 2 кода html код нашей странички куда нужно поставить наше PopUp окошко и непосредственно код нашего PopUp окошка они находятся как вкладки в левом верхнем углу экрана редактора NotePad++

Для начала нам нужно будет вставить строчки кода в которых сообщается нашей странички где находится скрипт для работы PopUp окошка. Для этого в вкладке в редакторе NotePad++ выбираем вкладку под названием test.html выделяем и копируем текс как показан на рисунке (для того чтобы скопировать воспользуемся сочетанием клавиш на клавиатуре CTRL+C)Теперь нам нужно вставить его в код нашей странички. Для этого переходим в вкладку редактора NotePad++ под названием index.html и вставляем в то место которое показано на картинки (под «тем местом» имеется в веду место которое располагается между ключевыми словами <head>…</head> для удобства можно воспользоваться сочетанием клавиш CTRL+V)После того как мы вставили первую часть кода перейдём к копированию и вставке второй части кода для этого перейдём обратно во вкладку text.html и скопируем код который показан на рисунке Теперь переходим обратно к вкладке index.html и вставляем в место показанное на картинке (это место находится после ключевого слова <body>) В этомже коде редактируем текст который будет видить пользователь при попытки выйти из страницы.Теперь сохраняем наши изменения сочетанием клавиш CTRL+S

Сейчас нам нужно вернуть на место наш файл index.html (Вернуть на FTP Сервер где находится наш сайт с скопированным ранее папки arcticmodal)Проверяем что у нас получилось. Для этого заходим на нашу страничку и передвигаем курсор мыши к вкладке с кнопкой крестика для закрытия страницы и видим что перед нами всплывает наше окноНаше PopUp окошко готово! =) Приятного пользования!

ПОСТ БЫЛ ПОЛЕЗЕН? ЖМИТЕ "МНЕ НРАВИТСЯ"

geniuswiki.me