Как сделать popup окно на сайте?
Привет коллеги!
Как я и обещал, сейчас я расскажу, Как сделать popup окно на сайте «сей чудесный попап». 
Для тех кто в танке - Popup это такое всплывающее окно, которое выскакивает, когда вы заходите на сайт. Вы наверно уже видели такую штуку на expert-css.com.
Обычно попапы используют для рекламы, но также они довольно эффективно могут служить в качестве окна с подпиской. Ну, а для тех, кто ещё не понял что это такое, смотрите демо.
Ну и перейдём к «телу», ой, неужели я это сказал. 
Посмотрев видео ниже, вы сможете установить себе точно такое же всплывающее окошко как и в самой демке!
Ну и естественно поменять надписи, хотя… можете не менять
Скачать видео в качестве:
Скачать архив с попапом:
ВНИМАНИЕ! Для любителей эксклюзива!
Дизайн этого попапа был разработан лично мной. Вам он понравился?
А представьте, если такой popup будет висеть у каждого? Не совсем малина
Но в данном случае я могу вам помочь!
Я разработаю вам дизайн согласно вашим требованиям и желаниям, любой формы и размера!
Все – значит все! Кнопки, поля, фон, структуру. Нарисую, порежу, сверстаю, сделаю кроссбраузерность под все современные браузеры.
Если надо будет установить – не проблема!
[sbox id="info"]
Цена вопроса от 20$. В зависимости от плана работ.
Кого заинтересовало, милости прошу в контакты.
Тема при отправке письма – Заказать попап.
[/sbox]
ЗЫ: если долго не отвечаю – связывайтесь через форум или проверьте папку СПАМ в вашем ящике. Очень часто письма не доходят к владельцам ящиков на mail.ru!
ЗЫЫ: если что то непонятно – кидаем вопросы в комментах!
Ты молодчага, Сергей, сделал отличный урок по всплывающему окну! Двенадцать баллов по новой шкале!
Я уже как классный бонус буду раздавать ссылку на твой блог
Просто всё качественно и доходчиво у тебя получается!
Ты впереди! Мы с тобой!
Спасибо за отличный урок.
За попап спасибо Серега!
Но это же не тот вариант который у тебя стоит, как я понял.
И еще,Серега, как ты сделал спец выделения текстов в этом посте и в других?
Это какой то плагин на Макссайт? Можешь ссылку на него дать?
Отличный урок,
А установка такого окна на Wordpress возможноа?
Аноним, этот попап никак не связан с цмс, вы его можете поставить куда угодно!
Это плагин Special Box.Подробное описание тут http://6log.ru/special-text-boxes
Спасибо за урок!и как всегда чувство юмора на высоте!!!
суперский урок
продолжай в том же духе и еапиши про blogger
чёнить а то я в нём роботаю юуду благодарен
напишы
Такс, вчера не мог ответить, ходил зуб рвать.
Сейчас всем по порядку отечаю
1. Andy Grand - сэнкс Энди. Чуть что буду исправлять твои ошибки, но ты их лучше Сане посылай, я личность творческая и времени на исправление грамматики у меня совсем мало времени, почти нету
Ах да, ты меня еще не задрал
2. Сергей - пожалуйста!
3. Руслан, нет не тот, но я себе буду ставить именно этот. Тот который у меня стоит сейчас более тяжеловесный и глючный. Мы при установке задолбались дизайн корректировать, так как там стили пересекаются многие! И друг другу мешают! Даже сейчас если смотреть в разных браузерах - этот попап смотрится по разному.
Тот же который в демке, создавал я лично и с учетом того, что бы стили были индивидуальными, в итоге ничего не должно пересекаться и попап станет ровно на любой сайт и будет одинаково смотреться во всех современных браузерах.
4. Dima - сэнкс Димон
5. Илья, спасибо, про какой блоггер?
Он имеет ввиду бесплатную платформу для блогов от гугла. blogspot aka blogger
Серега. Два вопроса по этому попапу.
1) файлы скрипта кидать в корень сайта MaxSite или в папку с шаблоном?
2) что и где изменить в popup.js чтобы окно не выкатывалось сверху. А допустим появлялось, испарялось и тд. То есть, другими словами, как применить fadeIn, fadeOut, elastic и другие фишки библиотеки jquery.
Пытался сам разобраться в коде popup.js, но из за скромных познаний не смог ничего путного сделать.
Да куда угодно, просто потом в коде который вставляете на страницу путь прописать полностью и всё. (тоесть вот так: http://сайт.ру/папка1/папка2/popup.js
оооо, тут уже почти совсем другой скрипт надо, попробую посмотреть потом.
Комментатор 124, ответил на ваш вопрос на форуме
БОЛЬШУЩИЙ РЕСПЕКТ И СПАСИБО!!!
Ваш вариант даже легче в несколько раз, а если точнее в 2.5 раза=)
Только не понял почему в css файле top:50%; заменили на top:15%;.
Или это не критично.
ИМХО свойство display: none; важнее. Хотя опять таки разницу с visibility: hidden; не знаю=)
Руслан, дополнительный отступ был указан в скрипте.
Точнее стабилизирующий.
В принципе у меня стоял отступ на 50% и затем выставлено маргин-топ в минус, равное половине окна попапа, таким образом он был по центру.
Ничего критичного нет в принципе.
Свойство дисплэй нон, удаляет блок полностью из верстки.
Свойство хидден делает его невидимым, но структура блока учитывается.
Пожалуйста, обращайтесь
+ Спасибо Сергею за переписаные стили, стало гораздо проще.
ЗЫ Общение можем продолжить на форуме. Чуть позже покажу как сделать затемнение.
все.разобрался=)
есть вариант маргины авто поставить. Так насколько я знаю, тоже по центру будет.
У тебя маргин слева же стоит вроде как. Четвертым идет же по порядку.
Опять заменять стили надо, да?Хм... А при абсолютном (т.е. фиксированном) позиционировании маргин авто будет корректно работать?
По моему нет. Там указаны топ и лефт в 50%, а не маргин.
И маргин выступает в качестве корректирующего стиля, что бы откоректировать.
Ну как бы там идут мои стили, старался подобрать имена посложнее, что бы не пересекались со стилями сайтов, за счет этого мой попап должен отображаться ровно на всех сайтах!
Но при добавлении опций к попапу в скрипте стили немножко менялись.
Надо смотреть что там Саня со стилями наколдовал
Он когда правил яваскрипт - немного изменял мои стили.
его изменения касались только изменения визибла на дисплея.
и топ 15%. больше он ничего не менял=)
Обалдеть, читаю по русски, а ни фига не пойму! вот вы жжёте! Когда уже я научусь этому?
Э... Георгий
Есть еще такие люди, как программисты.
Вот если они между собой начнут общаться - я тоже ничего не пойму
А что бы понять нас, есть курс за 900 рублей css-мастер который.
Там вы все узнаете о верстке сайта
Руслан - да фиг его знает что он там воротил
Я его только попросил скрипт по твоей просьбе модифицировать
СЕРЕГА ПРИВЕТ!ВСЕ ЗАШЕБИСЬ ТОЛЬКО Я ВОТ НЕ ЛЮБЛЮ ЭТИ ОКНА ОНИ МЕНЯ ПУГАЮТ! ВОТ ТАКАЯ Я ТРУСЛИВАЯ БОЮСЬ ЭТИХ БАНЕРОВ ВСЕ ДУМАЮ ЧТО ВИРУС ПОЙМАЮ Я УЖЕ ВЛЕТАЛА НЕСКОЛЬКО РАЗ. НУ ДА ЛАДНО У МЕНЯ ДРУГОЙ К ТЕБЕ ВОПРОС КАК МОЖНО ПОМЕНЯТЬ ШАПКУ НА ВОРДПРЕССЕ ДЛЯ ОЧЕНЬ ТУПЫХ ЭТО Я ПРО СЕБЯ. И ЕЩЕ КАК ДЕЛАЮТ БАНЕРЫ МОЖЕТ ЗНАЕШЬ ПОДСКАЖИ ТЫ ПО МОЕМУ ВСЕ ЗНАЕШЬ , БЛИН И Я ХОЧУ ЗНАТЬ НО ТАК КАК Я ЕЩЕ НЕ ПРОСТО ЧАЙНИК А ЧАЙНИК С ТУПЫМ НОСИКОМ НУ НЕ ХРЕНА НЕ МОГУ ПОНЯТЬ КАК ВСЕ ЭТО СДЕЛАТЬ А МНЕ ТАК ЭТО НУЖНО ПОМОГИ ДРУЖИЩЕ НЕ ДАЙ МНЕ СДОХНУТЬ ОТ ЭТОЙ ИДЕИ. ЖМУ ТВОЮ РУКУ
ну блин вот я тупая адресс то свой не оставила вдруг ты всетаки мне ответишь [email protected]
Молодец Серёга! приятно с такими людьми иметь дело!!
Серега. А как ты подключаешь попап к MaxSite?
Через ушку?
Если да, то пути к скрипту в нем прописываешь?
Или в ушку только код попапа суешь, а пути в хеде прописываешь?
Файл скрипта и стили подколючаются в header.php, а сам код попапа прописывается в main-end.php
Спасибо за урок, Сергей.
Твой попап я уже приспособила на свой новый сайт.
Класно получилось!
http://happy4woman.ru/products/happy/
Как сделать затемнение читаем на форуме.
Молодца Серёга!!! Посмотрел и даже допёр как на uCoz ставить попуп!
пример -
Саламалейкум серега, попап окно установлен. Но иногда он не останавливается на странице, а сразу вылетает вниз и станет не видно. А иногда работает отлично. В чем может быть проблема, не подскажете? Использую броузер мозилла. Сайт: www.habarshalkar.kz
Малейкумасалам
Правильно/нет?
У меня все отлично отображает.
Вот только желательно поставить, что бы попап отображался один раз.
Иначе задолбешь посетителей.
Малейкумасалам-Алейкумсалам
Уже сделал так чтобы отображался 1 раз. Спасибо Вам большие за уроки. Я тоже хочу сделать так же, но только на казахском языке. Но пока не получается:(
Что хотите сделать? попап? Если да, то что не получается?
Имел ввиду видео урок на тему попап окон на казахском языке. Со звуком не получается
!
Хрипит или плохо слышно?
не знаю как объяснить , но слышать противно и смешно чертовский. Наверное из за микрофона. Я использовал наушник с микрофоном
немного такой металический звук?
типа такой
Я скачал Плагин "Popup Monster" установил на MaxSite смотрю ваша тямтя-лямтя ссылка http://rgblog.ru/page/popupmonster
Знаю знаю
Еррор 404 при скачивании архива
Да, всё прекрасно, только окно появляется при каждом открытии новой страницы... это слишком уж навязчиво. До решения этой проблемы придётся убрать окно :(
Это не навязчиво - это уже спам
Настраивать там можно - что бы он появлялся один раз только.
Подскажите, как вставить данное окно в Джумлу?
Здравствуйте, у меня тоже вопрос на с чет Джумлы, если можно подскажите как настроить на Джумле, весь день провозился, все за зря(
Люди, я на джумле не работаю, так что от моих советов здесь толку 0.
Серёга чёт на рнр не пашет скритец.
да там ошибка в html
В html5 нет спецыфикации language="javascript"
Эт спецификацию браузер должен понимать по любому.
Конечно он её понимает.ну если стр. в html5 писана значит и спецификацию нужно подгонять,чтоб без ошибок.
Сам знаешь псы ошибки не очень.
Для валидации html5 советую сервис http://html5.validator.nu/
А W3C чем тебе не угодил?
А W3C сам напровляет туда.Они ещё тормозят с развитием html5 ,Бета короче
Ясно. СПС.
Отличный урок,как раз то-что надо!!! Огромное спасибо!!!
Здравствуйте!Применил Ваш попап ,работает.Есть одно но,когда открываешь сайт и не прокручиваешь вниз то попап выходит нормально и можно закрывать.А если не дожидаясь появления попапа и прокручиваешь вниз читая информацию.то попап появляется и уходит вниз сайта или экрана .показывая только свою верхушку.Оставлю ссылку на страничку свою можете посмотреть http://www.videkurs.ru/index-foto.html
Как можно исправить эту проблему.Заранее благодарю Сергей
Еще раз напишу ,Может фото появится.Здравствуйте!Применил Ваш попап ,работает.Есть одно но,когда открываешь сайт и не прокручиваешь вниз то попап выходит нормально и можно закрывать.А если не дожидаясь появления попапа и прокручиваешь вниз читая информацию.то попап появляется и уходит вниз сайта или экрана .показывая только свою верхушку.Оставлю ссылку на страничку свою можете посмотреть http://www.videkurs.ru/index-foto.html
Как можно исправить эту проблему.Заранее благодарю Сергей
Спасибо
задолбался искать хоть что нибудь что может сделать подписку.
Одни берныры кругом ):