Как установить popup?

Вторник, 21 июня 2011 года в 01:56      Просмотров: 5959
Как установить popup?

Привет коллеги!

Как я и обещал, сейчас я расскажу, как поставить на свой сайт «сей чудесный попап». smile

Для тех кто в танке - Popup это такое всплывающее окно, которое выскакивает, когда вы заходите на сайт. Вы наверно уже видели такую штуку на saratov-adsl.ru.

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

Ну и перейдём к «телу», ой, неужели я это сказал. red face

Посмотрев видео ниже, вы сможете установить себе точно такое же всплывающее окошко как и в самой демке!

Ну и естественно поменять надписи, хотя… можете не менять smile

[sbox id="download"]

Скачать видео в качестве:

1. Скачать с народа

2. Скачать с летитбит

Скачать архив с попапом:

Скачать с народа

[/sbox]

ВНИМАНИЕ! Для любителей эксклюзива!

Дизайн этого попапа был разработан лично мной. Вам он понравился?

А представьте, если такой popup будет висеть у каждого? Не совсем малина smile

Но в данном случае я могу вам помочь!

Я разработаю вам дизайн согласно вашим требованиям и желаниям, любой формы и размера!

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

Если надо будет установить – не проблема!

[sbox id="info"]

Цена вопроса от 20$. В зависимости от плана работ.

Кого заинтересовало, милости прошу в контакты.

Тема при отправке письма – Заказать попап.

[/sbox]

ЗЫ: если долго не отвечаю – связывайтесь через форум или проверьте папку СПАМ в вашем ящике. Очень часто письма не доходят к владельцам ящиков на mail.ru!

ЗЫЫ: если что то непонятно – кидаем вопросы в комментах!

Комментариев: 54

Ты молодчага, Сергей, сделал отличный урок по всплывающему окну! Двенадцать баллов по новой шкале!

Я уже как классный бонус буду раздавать ссылку на твой блог smile

Просто всё качественно и доходчиво у тебя получается!

Ты впереди! Мы с тобой!

За попап спасибо Серега!

Но это же не тот вариант который у тебя стоит, как я понял.

И еще,Серега, как ты сделал спец выделения текстов в этом посте и в других?

Это какой то плагин на Макссайт? Можешь ссылку на него дать?

4. Аноним
2011-06-21 в 18:52:11

Отличный урок,

А установка такого окна на Wordpress возможноа?

И еще,Серега, как ты сделал спец выделения текстов в этом посте и в других?
Это какой то плагин на Макссайт? Можешь ссылку на него дать?

Это плагин Special Box.Подробное описание тут http://6log.ru/special-text-boxes

Спасибо за урок!и как всегда чувство юмора на высоте!!!

8. подписчик илья
2011-06-22 в 11:56:51

суперский урок rock продолжай в том же духе и еапиши про blogger

чёнить а то я в нём роботаю юуду благодарен ok

Такс, вчера не мог ответить, ходил зуб рвать.

Сейчас всем по порядку отечаю smile

1. Andy Grand - сэнкс Энди. Чуть что буду исправлять твои ошибки, но ты их лучше Сане посылай, я личность творческая и времени на исправление грамматики у меня совсем мало времени, почти нету smile

Ах да, ты меня еще не задрал smile

2. Сергей - пожалуйста!

3. Руслан, нет не тот, но я себе буду ставить именно этот. Тот который у меня стоит сейчас более тяжеловесный и глючный. Мы при установке задолбались дизайн корректировать, так как там стили пересекаются многие! И друг другу мешают! Даже сейчас если смотреть в разных браузерах - этот попап смотрится по разному.

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

4. Dima - сэнкс Димон smile

5. Илья, спасибо, про какой блоггер?

5. Илья, спасибо, про какой блоггер?

Он имеет ввиду бесплатную платформу для блогов от гугла. blogspot aka blogger

Серега. Два вопроса по этому попапу.

1) файлы скрипта кидать в корень сайта MaxSite или в папку с шаблоном?

2) что и где изменить в popup.js чтобы окно не выкатывалось сверху. А допустим появлялось, испарялось и тд. То есть, другими словами, как применить fadeIn, fadeOut, elastic и другие фишки библиотеки jquery.

Пытался сам разобраться в коде popup.js, но из за скромных познаний не смог ничего путного сделать.

1) файлы скрипта кидать в корень сайта MaxSite или в папку с шаблоном?

Да куда угодно, просто потом в коде который вставляете на страницу путь прописать полностью и всё. (тоесть вот так: http://сайт.ру/папка1/папка2/popup.js

2) что и где изменить в popup.js чтобы окно не выкатывалось сверху. А допустим появлялось, испарялось и тд. То есть, другими словами, как применить fadeIn, fadeOut, elastic и другие фишки библиотеки jquery.

оооо, тут уже почти совсем другой скрипт надо, попробую посмотреть потом.

БОЛЬШУЩИЙ РЕСПЕКТ И СПАСИБО!!!

Ваш вариант даже легче в несколько раз, а если точнее в 2.5 раза=)

Только не понял почему в css файле top:50%; заменили на top:15%;.

Или это не критично.

ИМХО свойство display: none; важнее. Хотя опять таки разницу с visibility: hidden; не знаю=)

Руслан, дополнительный отступ был указан в скрипте.

Точнее стабилизирующий.

В принципе у меня стоял отступ на 50% и затем выставлено маргин-топ в минус, равное половине окна попапа, таким образом он был по центру.

Ничего критичного нет в принципе.

Свойство дисплэй нон, удаляет блок полностью из верстки.

Свойство хидден делает его невидимым, но структура блока учитывается.

Пожалуйста, обращайтесьwink + Спасибо Сергею за переписаные стили, стало гораздо проще.

ЗЫ Общение можем продолжить на форуме. Чуть позже покажу как сделать затемнение.

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

затем выставлено маргин-топ в минус,

У тебя маргин слева же стоит вроде как. Четвертым идет же по порядку.

Спасибо Сергею за переписаные стили, стало гораздо проще.
Опять заменять стили надо, да?

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

Хм... А при абсолютном (т.е. фиксированном) позиционировании маргин авто будет корректно работать?

По моему нет. Там указаны топ и лефт в 50%, а не маргин.

И маргин выступает в качестве корректирующего стиля, что бы откоректировать.

Опять заменять стили надо, да?

Ну как бы там идут мои стили, старался подобрать имена посложнее, что бы не пересекались со стилями сайтов, за счет этого мой попап должен отображаться ровно на всех сайтах!

Но при добавлении опций к попапу в скрипте стили немножко менялись.

Надо смотреть что там Саня со стилями наколдовал smile

Он когда правил яваскрипт - немного изменял мои стили.

его изменения касались только изменения визибла на дисплея.

и топ 15%. больше он ничего не менял=)

21. Георгий
2011-06-23 в 21:37:33

Обалдеть, читаю по русски, а ни фига не пойму! вот вы жжёте! Когда уже я научусь этому? smile

Э... Георгий smile

Есть еще такие люди, как программисты.

Вот если они между собой начнут общаться - я тоже ничего не пойму smile

А что бы понять нас, есть курс за 900 рублей css-мастер который.

Там вы все узнаете о верстке сайта raspberry

Руслан - да фиг его знает что он там воротил smile

Я его только попросил скрипт по твоей просьбе модифицировать rock

23. Аноним
2011-06-24 в 13:23:49

СЕРЕГА ПРИВЕТ!ВСЕ ЗАШЕБИСЬ ТОЛЬКО Я ВОТ НЕ ЛЮБЛЮ ЭТИ ОКНА ОНИ МЕНЯ ПУГАЮТ! ВОТ ТАКАЯ Я ТРУСЛИВАЯ БОЮСЬ ЭТИХ БАНЕРОВ ВСЕ ДУМАЮ ЧТО ВИРУС ПОЙМАЮ Я УЖЕ ВЛЕТАЛА НЕСКОЛЬКО РАЗ. НУ ДА ЛАДНО У МЕНЯ ДРУГОЙ К ТЕБЕ ВОПРОС КАК МОЖНО ПОМЕНЯТЬ ШАПКУ НА ВОРДПРЕССЕ ДЛЯ ОЧЕНЬ ТУПЫХ ЭТО Я ПРО СЕБЯ. И ЕЩЕ КАК ДЕЛАЮТ БАНЕРЫ МОЖЕТ ЗНАЕШЬ ПОДСКАЖИ ТЫ ПО МОЕМУ ВСЕ ЗНАЕШЬ , БЛИН И Я ХОЧУ ЗНАТЬ НО ТАК КАК Я ЕЩЕ НЕ ПРОСТО ЧАЙНИК А ЧАЙНИК С ТУПЫМ НОСИКОМ НУ НЕ ХРЕНА НЕ МОГУ ПОНЯТЬ КАК ВСЕ ЭТО СДЕЛАТЬ А МНЕ ТАК ЭТО НУЖНО ПОМОГИ ДРУЖИЩЕ НЕ ДАЙ МНЕ СДОХНУТЬ ОТ ЭТОЙ ИДЕИ. ЖМУ ТВОЮ РУКУ

24. Аноним
2011-06-24 в 13:28:42

ну блин вот я тупая адресс то свой не оставила вдруг ты всетаки мне ответишь rudkovskayas@mail.ru

Серега. А как ты подключаешь попап к MaxSite?

Через ушку?

Если да, то пути к скрипту в нем прописываешь?

Или в ушку только код попапа суешь, а пути в хеде прописываешь?

А как ты подключаешь попап к MaxSite?

Файл скрипта и стили подколючаются в header.php, а сам код попапа прописывается в main-end.php

28. Елена
2011-06-26 в 19:41:40

Спасибо за урок, Сергей.

Твой попап я уже приспособила на свой новый сайт.

Класно получилось!

http://happy4woman.ru/products/happy/

Молодца Серёга!!! Посмотрел и даже допёр как на uCoz ставить попуп!

пример -

www.workinet.do.am

Саламалейкум серега, попап окно установлен. Но иногда он не останавливается на странице, а сразу вылетает вниз и станет не видно. А иногда работает отлично. В чем может быть проблема, не подскажете? Использую броузер мозилла. Сайт: www.habarshalkar.kz

Малейкумасалам smile Правильно/нет?

У меня все отлично отображает.

Вот только желательно поставить, что бы попап отображался один раз.

Иначе задолбешь посетителей.

Малейкумасалам-Алейкумсаламsmile

Уже сделал так чтобы отображался 1 раз. Спасибо Вам большие за уроки. Я тоже хочу сделать так же, но только на казахском языке. Но пока не получается:(

Имел ввиду видео урок на тему попап окон на казахском языке. Со звуком не получаетсяsmile!

не знаю как объяснить , но слышать противно и смешно чертовский. Наверное из за микрофона. Я использовал наушник с микрофономsmile

40. Григорий
2011-10-21 в 16:20:37

Я скачал Плагин "Popup Monster" установил на MaxSite смотрю ваша тямтя-лямтя ссылка http://rgblog.ru/page/popupmonster

Да, всё прекрасно, только окно появляется при каждом открытии новой страницы... это слишком уж навязчиво. До решения этой проблемы придётся убрать окно :(

Это не навязчиво - это уже спам grin

Настраивать там можно - что бы он появлялся один раз только.

45. Виталий
2012-01-30 в 17:13:53

Подскажите, как вставить данное окно в Джумлу?

Здравствуйте, у меня тоже вопрос на с чет Джумлы, если можно подскажите как настроить на Джумле, весь день провозился, все за зря(

Серёга чёт на рнр не пашет скритец.

да там ошибка в html

В html5 нет спецыфикации language="javascript"

[removed]
правильно походу 
[removed]

Конечно он её понимает.ну если стр. в html5 писана значит и спецификацию нужно подгонять,чтоб без ошибок.

Сам знаешь псы ошибки не очень.

Для валидации html5 советую сервис http://html5.validator.nu/

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)