Как сделать popup окно на сайте?

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[sbox id="info"]

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

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

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

[/sbox]

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

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

Комментариев: 57 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

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

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

Комментариев: 57
  •  Andy Grand | 21 июня 2011 в 09:42:43

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

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

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

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

  •  Сергей | 21 июня 2011 в 11:51:32

    Спасибо за отличный урок.

  •  Руслан Сафин | 21 июня 2011 в 17:50:26

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

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

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

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

  •  Аноним | 21 июня 2011 в 18:52:11

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

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

  •  Александр | 21 июня 2011 в 20:24:36

    Аноним, этот попап никак не связан с цмс, вы его можете поставить куда угодно!

  •  Александр | 21 июня 2011 в 20:35:51
    И еще,Серега, как ты сделал спец выделения текстов в этом посте и в других?
    Это какой то плагин на Макссайт? Можешь ссылку на него дать?

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

  •  Dima | 21 июня 2011 в 23:18:58

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

  •  подписчик илья | 22 июня 2011 в 11:56:51

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

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

  •  подписчик илья | 22 июня 2011 в 11:57:24

    напишы

  •  Серёга | 22 июня 2011 в 13:01:48

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

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

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

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

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

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

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

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

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

  •  Руслан Сафин | 22 июня 2011 в 14:49:13
    5. Илья, спасибо, про какой блоггер?

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

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

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

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

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

  •  Александр | 22 июня 2011 в 15:33:13
    1) файлы скрипта кидать в корень сайта MaxSite или в папку с шаблоном?

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

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

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

  •  Александр | 22 июня 2011 в 19:07:34

    Комментатор 124, ответил на ваш вопрос на форуме

  •  Руслан Сафин | 22 июня 2011 в 21:05:08

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

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

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

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

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

  •  Серёга | 22 июня 2011 в 21:15:04

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

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

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

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

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

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

  •  Александр | 22 июня 2011 в 21:17:06

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

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

  •  Руслан Сафин | 22 июня 2011 в 21:20:36

    все.разобрался=)

  •  Руслан Сафин | 23 июня 2011 в 11:53:45

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

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

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

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

  •  Серёга | 23 июня 2011 в 12:11:15
    есть вариант маргины авто поставить. Так насколько я знаю, тоже по центру будет

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

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

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

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

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

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

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

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

  •  Руслан Сафин | 23 июня 2011 в 13:26:38

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

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

  •  Георгий | 23 июня 2011 в 21:37:33

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

  •  Серёга | 23 июня 2011 в 21:42:34

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

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

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

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

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

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

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

  •  Аноним | 24 июня 2011 в 13:23:49

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

  •  Аноним | 24 июня 2011 в 13:28:42

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

  •  Комментатор 128 | 25 июня 2011 в 19:46:13

    Молодец Серёга! приятно с такими людьми иметь дело!!

  •  Руслан Сафин | 25 июня 2011 в 21:00:41

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

    Через ушку?

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

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

  •  Александр | 25 июня 2011 в 23:49:30
    А как ты подключаешь попап к MaxSite?

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

  •  Елена | 26 июня 2011 в 19:41:40

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

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

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

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

  •  Александр | 26 июня 2011 в 22:25:32

    Как сделать затемнение читаем на форуме.

  •  Иван | 4 июля 2011 в 14:49:58

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

    пример -

    www.workinet.do.am
  •  Abikon | 17 августа 2011 в 17:33:53

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

    •  Серёга | 17 августа 2011 в 18:32:51

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

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

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

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

      •  Abikon | 17 августа 2011 в 20:09:46

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

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

        •  Александр | 17 августа 2011 в 20:11:55

          Что хотите сделать? попап? Если да, то что не получается?

          •  Abikon | 17 августа 2011 в 20:48:07

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

            •  Александр | 17 августа 2011 в 20:56:17

              Хрипит или плохо слышно?

              •  Abikon | 17 августа 2011 в 21:31:26

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

                •  Александр | 17 августа 2011 в 21:39:18

                  немного такой металический звук?

  •  Григорий | 21 октября 2011 в 16:20:37

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

  •  Cергей | 25 декабря 2011 в 20:49:58

    Еррор 404 при скачивании архива

  •  Андрей | 25 января 2012 в 00:27:57

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

  •  Серёга | 25 января 2012 в 08:30:49

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

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

  •  Виталий | 30 января 2012 в 17:13:53

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

  •  Владислав | 3 мая 2012 в 23:11:13

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

  •  Серёга | 4 мая 2012 в 07:45:14

    Люди, я на джумле не работаю, так что от моих советов здесь толку 0.

  •  Виктор | 26 июля 2012 в 12:44:11

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

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

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

    [removed]
    правильно походу 
    [removed]
  •  Серёга | 26 июля 2012 в 13:00:29

    Эт спецификацию браузер должен понимать по любому.

  •  Виктор | 26 июля 2012 в 14:15:47

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

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

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

  •  Серёга | 26 июля 2012 в 16:31:17

    А W3C чем тебе не угодил? smile

  •  Виктор | 26 июля 2012 в 18:06:29

    А W3C сам напровляет туда.Они ещё тормозят с развитием html5 ,Бета короче

  •  Серёга | 27 июля 2012 в 10:42:07

    Ясно. СПС.

  •  Кристина | 26 июля 2013 в 19:08:15

    Отличный урок,как раз то-что надо!!! Огромное спасибо!!!

  •  Сергей | 9 сентября 2013 в 20:58:01

    Здравствуйте!Применил Ваш попап ,работает.Есть одно но,когда открываешь сайт и не прокручиваешь вниз то попап выходит нормально и можно закрывать.А если не дожидаясь появления попапа и прокручиваешь вниз читая информацию.то попап появляется и уходит вниз сайта или экрана .показывая только свою верхушку.Оставлю ссылку на страничку свою можете посмотреть http://www.videkurs.ru/index-foto.html

    Как можно исправить эту проблему.Заранее благодарю Сергей

  •  Сергей | 9 сентября 2013 в 21:06:45

    Еще раз напишу ,Может фото появится.Здравствуйте!Применил Ваш попап ,работает.Есть одно но,когда открываешь сайт и не прокручиваешь вниз то попап выходит нормально и можно закрывать.А если не дожидаясь появления попапа и прокручиваешь вниз читая информацию.то попап появляется и уходит вниз сайта или экрана .показывая только свою верхушку.Оставлю ссылку на страничку свою можете посмотреть http://www.videkurs.ru/index-foto.html

    Как можно исправить эту проблему.Заранее благодарю Сергей

  •  Дмитрий | 23 января 2015 в 18:49:27

    Спасибо smile

    задолбался искать хоть что нибудь что может сделать подписку.

    Одни берныры кругом ):