Блогосфера

Всплывающее окно bootstrap jquery при нажатии

Приветствую! Пару дней назад озадачился с блогом. Убрал некоторые элементы, подкорректировал. Но больше волновало реализация формы подписки внутри блога. Ранее, чтобы подписаться на рассылку, нужно было выходить на внешний лендинг, и уже там было два варианта — либо вводит данные в форму, либо закрывает страницу.

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

Когда трафик поступает с социальных сетей, или с  Директа, то мы ведем на отдельный лендинг — отдельную страниц подписки, с которой удобнее снимать статистику и смотреть, что приносит подписчиков, а что нет.
Сейчас у смартреспондер — есть красивые формы подписки, которые при этом достаточно долго грузятся. Даже когда человек попадает на подписную, нередко требовалось несколько секунд, чтобы форма подгрузилась. Ладно на внешнем одностраничнике, но когда человек со всем этим css от формы, будет гулять по вашему сайту или блогу, то ничего хорошего из этого не выйдет.

Увеличится и время обработки страниц, могу и формы подгружаться не до конца. Да и в целом там вся css часть идет с внешнего сайта, и может не срабатывать, если сервер smartresponder был в какой то момент не доступен.

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

Кстати, если порыться в интернете, можно найти готовые решения. А если… ой как горит, то можно не убегая с этого блога скачать уже несколько найденных:

Скачать несколько шаблонов (фото ниже)

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

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

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

Делаем всплывающее окно bootstrap (модальное окно jquery css по современному)

Один из блогеров Pat Flynn (//www.smartpassiveincome.com/) решил всё гораздо интересней на мой взгляд. Поставил плагин для вордрпесс Optin Skin — суть которого — быстрая реализация форм подписки в разных частях блога. При этом, под каждую подписную, можно устраивать сплит тестирование. Изменяя тот же фон или расположение элементов в созданной форме, график подписчиков покажет, насколько  результат стал лучшим или худшем.

И до безумия конечно захотелось подобный плагин,  который стоит как помниться 2500 рубликов. Но было решено сделать всё самостоятельно. Весь плагин мне не нужен, нужно было лишь вот что:

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

Например, попал читатель на ресурс — и начинает читать статью…

в конце статьи ему предлагаем подписаться. Не захотел… увидел комментарии и начал скроллить дальше…

В футере блога ещё раз предлагаем подписаться. И так в разных местах.

При нажатии по кнопке — выскакивает форма подписки, в которой заполняем имя и емайл. При этом форма появляется красиво, и задний фон немного затемняется…

По идее ничего особенного… Думаю сделаю на div-ах с jquery библиотеками… Пороюсь в интернете, наверняка есть готовые решения…

И наткнулся на более интересную тему. На реализацию подобных окон с помощью bootstrap. Посмотрел примеры — понравилось. Дальше думаю посмотреть, а что там за плагин Optin Skin, который подключает формы подписки… как всё там работает?

И по идее там вся реализация на этом самом bootstrap.

Что такое Bootstrap?

Twitter Bootstrap — свободный набор инструментов для создания сайтов и приложений. Включает в себя html и css шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

Основные инструменты Bootstrap:

  • Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу .span2, который можно использовать в CSS описании документа.
  • Шаблоны — Фиксированный или резиновый шаблон документа.
  • Типографика — Описания шрифтов, определение некоторых классов для шрифтов таких как код, цитаты и т. п.
  • Медиа — Представляет некоторое управление изображениями и Видео.
  • Таблицы — Средства оформления таблиц, вплоть до добавления функциональности сортировки.
  • Формы — Классы для оформления не только форм, но и некоторых событий происходящих с ними.
  • Навигация — Классы оформления для Табов, Вкладок, Страничности, Меню и Тулбара.
  • Алерты — Оформление диалоговых окон, Подсказок и Всплывающих окон.

Сильно не люблю закапываться вглубь терминологии, да и во многих вещах на самом деле я далекий. Но захотелось создать всплывающий div, используя современные средства.

Как я понял — простыми словами Bootstrap — это полностью готовая css структура для всех элементов сайта, используя которую ваш сайт будет выглядеть как полагается.

Кому нужно готовое решение, чуть ниже будет архив, в котором всё сделано.

Вот полностью все 3 элемента захвата, которые можно применять на своих проектах.

ссылка на скачивание

В архиве один файл html, и папка bootstrap, в которой 2 файла — css, и js.

Стандартный файл bootstrap довольно весомый. Порядка 6000 строк. Немного прикинул, и решил — какой смысл таскаться с таким файлом по всему сайту читателю. И удалил всё к чертям, оставив самое нужное… файл уменьшился с 6000 строк до 230 строк.

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

А на блоге в стандартном style.css — отключил, чтобы подгружать из bootstrap.css. В общем порылся — главное работает и ладно. Какой-нибудь мозг наверняка попинает меня в комментариях, сказав что можно было сделать немного по-другому.

Мне всё равно! Делайте как считаете нужным ))) Но думаю это решение пригодится многим. Тем более полностью готовое. Остается поменять под свой проект и в путь…

После нажатия по любой из кнопок, будет всплывать один и тот же элемент div (модальное окно jquery)

Прикольно правда? Ещё бы… Я и сам буду в эту статейку нырять не раз. Просто супер ))

А ещё самое интересное знаешь что? Везде, где только не встречал… это всплывающее окно вылетало то сверху, то сбоку. Думаю ерунда какая-то… Нужно было простое появление, без всяких вылетов.

И о да! Это то что нужно. Нажал окно появилось, можно закрыть как по крестику, так и щелкнув в любом элемента страницы.

В общем дублирую ссылку на скачивание:

Забрать готовое решение всплывающего окна при нажатии по кнопке

Не знаю как будет спустя какое-то время. Возможно изображения те устареют и не будут подгружаться. Но это не столь страшно! Тем более это мои шаблоны книг, вместо которых нужно вставлять свои.

Просто в фотошоп подготовишь что-нибудь подобное и всё! В любую форму вставляем и радуемся.

Первую можно применять для боковых элементов. Советую в правой части сайта. Затем длинный div — поставить можно в футере,  и следующий — в конце каждой статьи (у себя редактировал файл: single.php — одна запись, прямо из вордресс)

И в конце хотелось бы ещё поделиться полезными вещами, которые просто необходимы. Редко когда найдешь всё в одном месте.

В общем — пригодится!

Как видишь, последний div имеет небольшую тень от рамки… слегка голубую. Нашел прикольный ресурс, где можно на автомате подготавливать тени к див блокам, с автоматической генерацией css файла.

Вот этот сайт:

  1.  _//shpargalkablog.ru/2011/06/css-box-shadow.html (просто покрутите ползунок, и всё станет ясно)

Но и это ещё не всё…

Чтобы быстро делать кнопочки и какие-либо формы, можно пользоваться так же готовыми генераторами.

Ну прелесть! Скажи?

Вот этот проект:

  1. _//livetools.uiparade.com/button-builder.html (Генератор кнопок css)
  2. _//livetools.uiparade.com/form-builder.html (Генератор форм подписки с простой структурой)

На этом пожалуй всё!

p. s. где можно применять подобное, можно только представить. На тех же вирусных открытках, привлекая трафик из социальных сетей, можно в конце давать ссылку на подарок, а чтобы получить — всплывет наше симпотное модальное окошечко, где потребуем ввести емайл…

Идей на самом деле много. Но в большинстве случаев для блогов и сайтов — идея полезная.

p. p. s. Кстати! Идея с вирусными открытками — тоже интересная. Помнишь, как то писал про запуск одной открытки? вроде на 1 декабря запустил… и на ней уже почти 20 000 переходов из соц. сетей. Большая часть идет из одноклассников.

а для запуска потребовалось всего 2300 человек. А на самом деле переходов было меньше… примерно 1500 изначально, которые и нагнали 20 000 бесплатно.

И с одной лишь такой открытки на данный момент в группу пришло +7000 участников. Дальше она ещё будет набирать обороты. Ведь ещё только середина декабря.

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

Эффект не столь большой. Но что если запустить не одну а 10 открыток?

В планах вообще не прикасаться к группе, до тех пор, пока не наберется 100 000 участников. А дальше, можно смело делегировать её модератору, поставив на полный автопилот. Как в плане развития, так и в плане заработка.

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

На данный момент в группе 12 000 участников. И без каких либо действий внутри группы — в неё ежедневно вступает по 300 человек. За счет одного простого способа, который разбирался в одной из прошлых статей.

Если упустили эксперимент, то добро пожаловать в эти статьи:

Как пригласить в группу людей на одноклассниках (запуск первых открыток — 2 видео урока)

и последняя запись по открыткам по новому году, с идеей бесплатной раскрутки групп:

Раскрутка группы в одноклассниках без применения программ

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

Ну а теперь всё!

Денис Повага

Мой телеграм канал, про блогинг и не только... Присоединиться!

Комментариев к статье: 11

  • Вот это зачет!!! То что нужно было… с простым появлением модального. Без вылетов. Спасибо Денис!

    Ответ
  • После применения данного способа, подписной лист увеличивается в 2 раза быстрее, в сравнении с баннерами, или формами подписки!

    Ответ
  • Денис привет! Подскажи как и куда эти файлы залить что-бы заработало все, никак не могу разобраться. Заранее спасибо

    Ответ
    • Константин, приветствую! Заливаем к себе на хостинг в отдельную папку. А далее, между закрывающимся тегом head> прописываем библиотеку квери, и путь до скрипта. В архиве кстати, имеется уже готовая страница с тремя вариантами. Можно просто открыть её через любой редактор и выдернуть код на свой сайт. Если не работает, попробуйте указать полный путь до всех файлов. При распаковке ведь все работает на компьютере. Значит и на вашем сайте будет работать. Я также пользуюсь этим окошком для сбора подписчиков.

      Ответ
  • Привет Денис! А вот у меня не работает даже на компьютере. Открываю страницу с тремя вариантами формы, по любой из них щёлкаю, и страница автоматом скроллится на самый верх, и нечего более не происходит. А в архиве ведь нечего не менял. В чём может быть проблема?

    Ответ
    • Привет! проверил — всё работает. Там подключается 2 файла bootstrap, один стилей, другой js и библиотека jquery 1.9.1 . Скрипт полностью рабочий. Возможно не правильно распаковали.

      Ответ
      • Вечера,
        подскажите, пожалуйста, как правильно распаковывать?)) У меня не работает на компьютере. Есть файл modalnoe-Povaga_kniga.html и папка bootstrap с файлами bootstrap.css и bootstrap.js

        Ответ
  • Здравствуйте, Денис. Я новичек в этом деле. Если Вам не сложно, можете пожалуйста создать видео, как создать всплывающее окно для формы 3 ? Заранее спасибо. Думаю будет многим интересно, как подробно это делается. Я не знаю, что куда вставлять. Выбранный код вставил перед закрывающим тегод body и не чего не получилось у меня

    Ответ
    • Добрый день. Код состоит по идее из двух частей. Сначала подгружаем библиотеку jquery и ещё 2 строчки, одна из которых это файл стилей (…bootstrap.css») для окна ботстрап, и другая …bootstrap.js , файл скрипта.

      Все эти 3 строчки:
      1) … jquery/1.9.1/jquery.min.js
      2) … bootstrap.js
      3) … bootstrap.css

      — вставляются между тегов head. Можно перед закрывающимся < / head >, или чуть выше!

      и далее, в нужном месте страницы, уже внутри тегов body — тела страницы, необходимо вставить основной div код нужной формы подписки (он состоит из изображения книги и самой кнопки. Кнопка в данном случае в виде простой ссылке, просто на ней висит нужный стиль, и при её нажатии идет обращение к элементу #myModal)

      А сам div с id=myModal он не отображается на страницы, у него в стилях прописано display: none; и отображение идет только в случае нажатия кнопки (ссылки), . В данном случае, этот див можно разместить в самом низу странице, в её футере. Например, на вордпрессе я кинул его в файл footer.php, а в виджете вставил саму форму со ссылкой. получается, куда бы человек не перешел на сайте, он может нажать на ссылку и всплывет окно с формой подписки. Область футера она ведь не меняется., структура динамическая.

      Вообщем, постарался объяснить подробнее, хотя и сам плохо разбираюсь в кодах ))

      Ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *