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

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

Разделы:

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

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

Я хочу вам рассказать как сделать всплывающее окно без особых знаний и где не нужно подстраиваться под стили 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:
* Сообщение: