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

ГлавнаяJava скрипты → Всплывающие окна

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

Для того, что бы сделать красивое всплывающее окно, необходимы довольно большие познания в области таблицы HTML. Да и никто не даст гарантии, что сделанное грамотно окно, будет правильно отображаться на созданном вами сайте (сайты со стилями CSS). А почему? Потому что, под каждый стиль нужен индивидуальный подход.

Разделы:

  • Всплывающее новое окно Windows при клике
  • Всплывающее окно PopUp при нажатие на ссылку, при клике
  • Всплывающее окно PopUp при открытии, или закрытии страницы

Я хочу вам рассказать как сделать всплывающее окно без особых знаний и где не нужно подстраиваться под стили CSS. Для этого нам (это в любом случае) потребуется Photoshop, и два разных сайта, с помощью которых мы будем генерировать код для нашего окна. Поверьте, сложного ничего нет!

Всплывающее (модальное) окно PopUp при клике

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


Как вы видите окно находится по центру и остаётся не подвижным при прокрутке страницы. Во внутрь всплывающего окна вы вставляете необходимую вам форму (регистрация, рассылка, активация и т.д.).

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

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

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


Нажмите для открытия нового окна Windows


Код скрипта абсолютно не большой и не сложный. Ниже я приведу вам его описание

Код перед </head>

<script language="JavaScript">
<!--
function winop() {
windop = window.open("http://ваш_сайт.html","mywin","width=670,height=480,left=100,top=30");
}
-->
</script>

Здесь вы указываете адрес страницы, которая будет открыта в новом окне, размеры этого окна width и height, а так же его (окна) расположение: слева от экрана left и сверху top.

Следущий код вставляете в нужное вам место страницы

          <!-- Ссылка в виде текста: -->
<a href="javascript:winop();">Новое окно Windows</a>
                           
          <!-- Ссылка в виде фотографии: -->
<a href="javascript:winop();">
<img src="http://ваша_ссылка_на_фото.jpg" border="0" 
alt="Моё фото" /></a>

Здесь вы вставляете тот код, который вам нужен: либо это в виде ссылки, либо в виде картинки (2-ой код).

Если вы хотите поставить несколько всплывающих новых окон Windows на одной странице, то для этого необходимо сделать совсем небольшие дополнения, т.е. перед </head> прописать ещё такой же код, только в function winop необходимо дописать цифру, например: function winop2. И соответственно в ссылке (для открытия нового окна) тоже изменить <a href="javascript:winop();"..... на <a href="javascript:winop2();"..... и так далее.

Работает исправно во всех основных браузерах, единственное в IE (что даже не удивительно) открывает новое окно без указанных размеров, как новую вкладку.

Всплывающее окно при открытии (закрытии) страницы

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

Дальше открываем в Photoshop наш сохранённый рисунок и делаем все изменения под себя, вставляем в него необходимые нам фото и текст, оставляя при этом место для полей "Формы подписки", "Обратной связи" или "Входа на сайт" (имя, e-mail, кнопка).

Здесь уже проставлена форма для подписки и можете смело понажимать (функция передачи данных отключена).

А в конце мы с помощью 2-ух сервисов сделаем всплывающие окна при откритии и закрытии страниц применяя наши заготовки.

А теперь всё подробно:

Делаем форму подписки

И так, у нас есть готовое фото, куда осталось только прописать код формы для нашей подписки. Это делается просто. Мы будем рассматривать пример рассылки на Smartresponder

Горизонтальное расположение формы

фото формы подписки

Код для style.css

.formpriym{margin:0 auto;padding:0;text-align:center;background-image:url(etalon.png);background-repeat:no-repeat; width:750px;height:370px;position:relative;}
form.priym{margin:0;position:absolute;top:290px;left:162px;}
form.priym input.name{background-image:url(name.png);background-repeat:no-repeat; background-color: transparent; vertical-align:middle;border:0 none;height:28px;background-size:140px;font-family:"Times New Roman";margin:1px 0 0;padding:0 6px;font-weight:bold; font-size:14px;color:#666;width:130px;}
form.priym input.knop{vertical-align:middle;}

Перед формой поставим стандартный скрипт от Smartresponder для проверки вводимых данных пользователем. Здесь изменять ничего не нужно, просто копируйте и вставляйте перед самой формой.

<script language="javascript" type="text/javascript">
function SR_IsListSelected(el)
{
  for (var i = 0; i < el.length; i ++)
    if (el[i].selected ||
      el[i].checked)
      return i;
  return -1;
}
function SR_trim(f)
{
  return f.toString().replace(/^[ ]+/, '').replace(/[ ]+$/, '');
}
function SR_submit(f)
{
  f["field_name_first"].value = SR_trim(f["field_name_first"].value);
  f["field_email"].value = SR_trim(f["field_email"].value);
  if ((SR_focus = f["field_name_first"]) && f["field_name_first"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1 || (SR_focus = f["field_email"]) && f["field_email"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1) { alert("Укажите значения всех обязательных для заполнения полей (помечены звездочкой)"); SR_focus.focus(); return false; }
  if (!f["field_email"].value.match(/^[\+A-Za-z0-9][\+A-Za-z0-9\._-]*[\+A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/)) { alert("Некорректный синтаксис email-адреса!"); f["field_email"].focus(); return false; } 
return true;
}
</script>

Далее пропишем код самой формы, где у нас будет всего лишь 2 текстовых поля и кнопка "Подписаться".

<div class="formpriym" action="http://smartresponder.ru/subscribe.html" method="post" target="_blank" onsubmit="return SR_submit(this)">
<form class="priym" action="" method="post">
<input name="version" value="1" type="hidden">
<input name="tid" value="0" type="hidden">
<input name="uid" value="999999" type="hidden">
<input name="lang" value="ru" type="hidden">
<input name="did[]" value="999999" type="hidden">
<input class="name" type="text" value="Ваше имя" name="field_name_first" onfocus="if(this.value=='Ваше имя')this.value='';" onblur="if(this.value=='')this.value='Ваше имя';">
<input class="name" type="text" value="Ваш e-mail" name="field_email" onfocus="if(this.value=='Ваш e-mail')this.value='';" onblur="if(this.value=='')this.value='Ваш e-mail';">
<input class="knop" type="image" src="battom.png" name="SR_submitButton">
</form>
</div>

А вот здесь (вышеуказанном коде) вам нужно сделать изменения в 2-ух местах:
<input name="uid" value="999999" type="hidden"> и здесь:
<input name="did[]" value="999999" type="hidden">
Заменив цифры 999999 на свои, полученные от того же Smartresponder.

И ещё один момент, обязательно прописывайте в коде полные пути до ваших картинок.


Заключительная процедура: генерируем наш код

Вариант 1

Когда вы проставили все свои значения в коде формы переходим на тот же сайт - smartresponder.ru => Формы => Генератор всплывающих окон =>
И в самый первый блок "HTML-код содержимого окна" вставляете наш код. Здесь же в самом низу страницы в блоке "Внешний вид всплывающего окна:" вы увидите своё произведение. Затем на этой же странице вы делаете необходимые вам настройки для всплывающего окна,там всё по русски и сложного ничего нет. Обязательно всегда делайте проверку - нажимайте на Протестировать.

P.S.
Здесь же вы точно отрегулируете нахождение вашей формы внутри окна - это в стилевом файле 2-ая строка сверху:

form.priym{margin:0;position:absolute;top:290px;left:162px;}

После того, когда все настройки сделаны и вас всё устраивает переходим к самому нижнему блоку HTML-код сгенерированного всплывающего окна: и там всё делаем по инструкции:
1) Копируем и вставляем полученный код к себе на страницу перед тегом </body>
2) Скачиваем на комп popover.js и загружаем в главную директорию к себе на сервер.
Всё любуемся и наслаждаемся!!!

Вариант 2

Когда вы проставили все свои значения в коде формы переходим на сайт -
http://popinbuilder.icoder.com
Не пугайтесь, что здесь на английском языке - всё так же просто.

1) Закройте появившееся всплывающее окно.
2) В первой графе "Title:" - удалите написанное, и оставьте поле пустым.
3) Переходим ниже в блок "Window":
   В "width" и "height" прописываем наши значения и кода формы, это 1-ая строка:
   <table width="750" height="370" background="http://age-dragon.com/......"

   Поля: "textColor" и "bgColor" - оставляем пустыми
   В "Transparent", "Crop content" и "Glide window" проставляем галочки

4) Переходим в блок "Title":
   Поля: "visible", "bgColor", "font" и "textColor" - оставляем пустыми
   На "Close" button - ставим галочку

5) Переходим в блок "Window Position":
   Ставите позицию на ваше усмотрение: центр, левый угол низ, верх и т.д.
   "Shift position" - ставим "0"

6) Переходим в блок "Border":
   Здесь все поля пустые.

7) Переходим в блок "Show Window":
   "on page Exit" и "on page Load"- при открытии или закрытии страницы
   "msecs delay" - задержка срабатывания окна в милисекундах
   "Show window once every" - выставляя данный параметр, вы можете
    указать, - сколько один пользователь будет видеть ваше всплыв. окно.

8) Теперь переходим в блок настройки кода (вверху)
   и нажимаем на "Source".
   В редакторе отобразится старый код - удалите его.
   Затем скопируйте наш код и вставьте в этот редактор.
   После нажмите внизу на "Generate Pop-In window" и перед вами
   всплывёт ваше окно. По необходимости отредактируйте его.
   
Остались последние 2-а этапа:

1) Скопируйте ниже код и вставьте его у себя на странице
   перед тегом </body>:
   <script src="PopIn.js"
   type="text/javascript"></script>

2) Нажмите на "Donwload Pop-In window" и сохраните файл "PopIn.js"
   А затем загрузите его в главную директорию к себе на сервер.

   Всё готово!
Поделись ссылкой с друзьями:

Комментарии к статье

СООБЩЕНИЕ АДМИНИСТРАТОРУ

* Ваше имя:
* Ваш e-mail:
* Сообщение: