В данном уроке пойдёт речь о 3D попапах, которые Вы сможете самостоятельно создать всего за несколько минут.

Сразу небольшая оговорка. Этот попап работает только в браузерах основанных на Internet Explorer (примерно 80% юзеров пользуются ими).

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

ШАГ #1

Скачайте из секретного раздела сайта (доступ только для подписчиков) программу Spinning Popup Generator.

ШАГ #2

Создайте содержимое вашего будущего попапа.

Например, Вы хотите разместить в этом вылетающем окошке форму подписки на вашу супер рассылку.

Сделайте на HTML страничку с формой подписки, описанием рассылки, описанием бонусов и т.д., а затем сохраните всё это чудо в фаил, например, 3d.htm.

Не забудьте также определиться с шириной и высотой содержимого. Для надежности, можете например, затолкать всё содержимое в таблицу <table style="width:500px; height:500px; "><tr><td>Содержимое</td></tr></table>.

ШАГ #3

Запускайте фаил Spinning Popup Generator.exe

ШАГ #4

Настраиваем основные параметры.

  1. Указываем фаил с содержимым.
  2. Ширина и высота попапа
  3. Толщина и цвет рамки

ШАГ #5

Настраиваем панель с кнопкой закрытия (крестик).

  1. Если Вы хотите её включить, то ставьте галочку в checkbox'е Include Close Bar.
  2. Выбирайте позицию панели. В примере она будет наверху, т.к. выбрано Top.
  3. Выберите цвет панели.
  4. Цвет крестика.
  5. Расположение крестика.

ШАГ #6

Настраиваем положение попапа и его скорость.

 

  1. Положение: В примере стоит - середина экрана (Middle-Center). Из выпадающего списка можно выбрать другие значения. Если не один из вариантов не устраивает, можно настроить свою позицию, выбрав пункт Specify и заполнив поля X-Pos (позиция по горизонтали) и Y-Pos (по вертикали).
  2. Количество кручений попапа в процессе вылета.
  3. Стиль кручения - можно выбрать из 4-х видов.
  4. Время вылета. Больше 2-х секунд ставить не рекомендую.

ШАГ #7

Настроим периодичность появления попапа.

Show every time page is visited - попап будет показываться при каждом посещении страницы, даже если пользователь его уже видел 2 минуты назад (Не рекомендую этот режим - раздражает).

Show no more than once per browser session - Попап будет показан один раз за сессию. Это означает, что посетитель увидит попап один раз за всё время нахождения на сайте. В следующий раз он сможет увидеть попап только после перезапуска своего браузера.

Show no more than once every.. - Показывать 1 раз в интервал. Интервал вы можете задать любой.

ШАГ #8

Смотрим предварительный результат и генерируем код.

Кнопка Preview Spinning Popup позволяет посмотреть предварительный вид разрабатываемого попапа, чтобы в случае чего, можно было подредактировать некоторые моменты.

Кнопка Generate Code - сгенерирует необходимый код, который затем нужно будет вставить в выбранную страницу.

Полученный код, осталось только вставить в любое место между тегами <body></body>

Чтобы не загромождать код, можно поступить так: скопировать этот код в фаил popup.js а затем в теле страницы вставить строку <script src="popup.js"></script>

Совет. Если вы используете в теле попапа ссылки (<a>Ссылка</a>), то обязательно добавляйте атрибут target="_blank", этим вы огородите себя от проблем связанных с загрузкой новой страницы во фрейме попапа.

Если вы хотите сделать кнопку закрытия попапа вне него самого, например, на самой странице, которая вызывает попап, то это можно сделать, вставив такой код: <a href="javascript:parent.sp1140460738181close()">Close</a> в необходимом месте страницы.

 


ВНИМАНИЕ!

Если Вас интересует более качественное обучение техническим навыкам ведения бизнеса в сети, то Вам наверняка понравится моя новая 36-ти часовая коллекция из 17 видеокурсов в формате flash- "Все Технические Моменты Онлайн Бизнеса в Видеоформате", которая позволит Вам быстро и легко овладеть всеми техническими моментами ведения бизнеса в сети, через наглядные примеры с аудиокомментариями.

В коллекцию вошли следующие курсы:

Создание сайта с нуля (18 уроков - 4 часа 40 минут)

Язык HTML (12 уроков - 3 часа 46 минут)

CSS - расширение возможностей HTML (11 уроков - 2 часа 12 минут)

Установка сервера (4 урока - 51 минута 48 секунд)

Macromedia Dreamweaver (20 уроков - 5 часов 0 минут)

Adobe Photoshop (16 уроков - 5 часов 18 минут)

"Graphic Collection" (6 уроков - 1 час 14 минут)

Создание электронных книг (7 уроков - 1 час 4 минуты)

Создание уроков в Camtasia Studio (7 уроков - 1 час 36 минут)

Создание всплывающих окон (3 урока - 37 минут 31 секунда)

Работа с флэшем "Flash Collection" (7 уроков - 2 часа 30 минут)

Mind Manager (4 урока - 1 час 22 минуты)

Установка форумов на Ваш сайт (3 урока - 25 минут 29 секунд)

Установке CMS (движков) (3 урока - 40 минут 41 секунда)

Snag It - работа со скриншотами (7 уроков - 1 час 48 минут)

"Navigation Collection" (6 уроков - 1 час 24 минуты)

Бонусный видеокурс (7 уроков - 2 часа 26 минут)

(!) - Все программы, которые нужны для прохождения курсов будут на Вашем диске.

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

Здесь Вы не найдете туманной информации о том "что делать", Вы найдете только то, что отвечает на вопрос "как делать?".

Такое меню Вы увидите, когда вставите DVD (CD) диск в свой привод:

 

Узнать Подробнее Прямо Сейчас!

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

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