Как сделать PopUp-окно

Как сделать PopUp-окно

Сделать свой PopUp или PopOver или по русски всплывающее окно, можно с помощью сервиса http://accesspopup.info/ можно, только к сожалению разместить его в конструкторе на народе не получится и на это есть несколько причин.

Отличие PopOver от PopUp тем, что оно не может блокироваться посетителем.

1) Самая главная в скрипте упрощённая форма вызова это хорошо, но скрипт конструктора режет её и её стили, в итоге окно не запускается так как надо (попросту оно загружается в месте там где ставили код в произвольный код).

2) Идут проблемы с кодировкой, вместо букв получаем квадратики…
Проблемы можно конечно решить изменив кодировки и приспособить PopUp под стили конструктора Яндекс Народа.
Но с этим справится не каждый.

Вообще ПопАп сделанный с помощью сервиса accesspopup.info очень легко поставить на рукописный сайт сделанный например в редакторе сайтов KompoZer или Dreamweaver, работает на ура!.., на народе не работает.

Как альтернативу могу предложить PopOver доработанный мной код от Smartresponder:

Вот html код который вставляем на сайт с помощью вставки произвольного кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Created by Aleksandr Novikov checked by http://infopodsolnux.ru Copyright © 2011. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<!-- SmartResponder.ru PopOver code (begin) -->
<script
 language="javascript" type="text/javascript" 
src="popover.js"></script><div 
id="SR_PopOverModalBackground" style="display: none; 
background-color:#000; filter: alpha(opacity=0); height: 100%; width: 
100%; position: absolute; top: 0px; left: 0px; opacity: 
0;"></div><span style="margin: 0; padding: 0; width: 350; 
height: 250; position: absolute; left: 0; right: 0; display: none;" 
id="SR_PopOver"><table cellspacing="0" cellpadding="0" width="350"
 height="250"><tr><td rowspan="2" colspan="2" width="348" 
height="248" style="border: 1px solid #0000cc"><table 
cellspacing="0" cellpadding="3" width="100%" height="100%" 
bgcolor="#ffffff">
<tr valign="middle" 
bgcolor="#0000ff"><td onMouseDown="popover_drag_start(event, this,
 'SR_PopOver')" width="100%" align="center" style="font-family: Verdana;
 font-size: 12pt; color: #ffffff; font-weight: 
bold;">Внимание!</td><td align="right"><table 
cellspacing="0"><tr><td style="padding: 0 3 0 3; 
background-color: #ff0000; font-family: Verdana; font-size: 10pt; color:
 #ffffff; font-weight: bold; border-left: 1px solid #ffffff; border-top:
 1px solid #ffffff; border-bottom: 2px solid #696969; border-right: 2px 
solid #696969;" onClick="popover_slideClose('SR_PopOver', 'up', 200)" 
onMouseOver="this.style.cursor='pointer'" 
onMouseOut="this.style.cursor='default'">X</td></tr></table></td></tr><tr><td
 colspan="2" style="font-family: Verdana; font-size: 10pt; color: 
#000000;" align="center" valign="middle" height="100%"><div 
align="center">

ЗДЕСЬ ВСТАВЛЯЕМ ВАШ ТЕКСТ

</div></td></tr></table></td><td
 width="2" height="2"></td></tr><tr><td 
bgcolor="#cccccc" height="246"></td></tr><tr><td
 width="2" height="2"></td><td width="346" 
bgcolor="#cccccc"></td><td 
bgcolor="#cccccc"></td></tr></table></span><script
 language="javascript" type="text/javascript">   function 
SR_startPopOver()   {   popover_set_margins(5, 5, 5, 
5);popover_slide('SR_PopOver', 'centerUp', 'centerCenter', 200, 0, 
'#000000');}   function 
onloadFunction(){window.setTimeout(SR_startPopOver, 0);}window.onload = 
onloadFunction;document.body.onload = onloadFunction;document.onload = 
onloadFunction;</script>
<!-- SmartResponder.ru PopOver code (end) -->
</body>
</html>

В данном коде вам необходимо поменять текст, вставить свой вместо: "ЗДЕСЬ ВСТАВЛЯЕМ ВАШ ТЕКСТ" или форму подписки от Smartresponder бесплатный аккаунт позволяет их создавать.

Как установить или этапы установки PopOver на сайт сделанный в конструкторе на Народе:

1) Скачиваем архив: http://you-sayt.narod.ru/downloads/PopUp-skript.zip
В архиве html страница с примером работы кода и скрипт который запускает всплывающее окно.

2) Закачиваем скрипт: popover.js в корень сайта в админке сайта в меню Конструктор сайтов => Управление файлами.

3) Идём в Конструктор сайтов и с помощью вставки произвольного кода <> вставляем изменённый код (приведён выше в Code:)

4) Нажимаем кнопку опубликовать. РАДУЕМСЯ ЖИЗНИ и РАЗДРАЖАЕМ ПОСЕТИТЕЛЯ!!!

Получится всплывающее окно примерно так:

Вот собственно и всё. 40-)

Такое всплывающее окно будет работать во всех браузерах одинаково хорошо! Советую почитать ниже 32-)

Категория: Как сделать PopUp-окно | Просмотров: 2240 | Добавил: Админ | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

(function(w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter11845852 = new Ya.Metrika({...

Статистика

В данный момент на сайте: 1

Бродяг: 1

Местных: 0

Хостинг от uCoz