Стильное CSS3 модальное окно | RuBizCSS3Modal
Создать модальное окно на jQuery — минутное дело... А что если у Вас сайт на WordPress или Joomla? По-прежнему это будет минутное дело? Да? Возможно, если Вы программист. Но, согласитесь, времени уйдет немало.
А что, если все уже готово, и Вам не нужно «нырять в функции»? А что, если «copy-paste» и заработало + просто текст в окне поменял? А что, если окно СОВСЕМ не будет мешать коду Вашего сайта? А что, если модальное окно на CSS3 и только? Ну неплохо же, согласитесь?
Мне пришлось повозиться несколько дней, чтобы:
1) создать окно именно на CSS3, и именно с плавными эффектами;
2) уменьшить количество кода до минимума;
3) сделать окно привлекательным и адаптивным;
4) сделать все понятным и работоспособным даже на Android;
5) без проблем добавлять новые варианты дизайна и эффекты появления окна.
Модальное окно RuBizCSS3Modal на примере:
Зачем нужно такое окно? Что ж, вот Вам преимущества RuBizCSS3Modal:
легко установить на ЛЮБОЙ САЙТ;
без JavaScript-а, что еще более упрощает установку, например на WordPress блог, или сайт на Joomla!;
есть видеоинструкция, что ЕЩЕ БОЛЕЕ упрощает установку;
легко настроить под себя;
легко привязать к картинке, кнопке (ссылке) и т.д. ;
есть вариант с подписной формой для: SendPulse, GetResponse и FalconSender
нет похожих аналогов (я о гибкости кода и подходе к делу).
ИНСТРУКЦИЯ:
ШАГ 1: Подключаем CSS стили
<!DOCTYPE HTML> <html> <head> <title>...</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!--===== RuBizCSS3Modal | Styles =====--> <link rel="stylesheet" type="text/css" href="rubizcss3modal.css"> </head> <body> <!--===== Контент ==--> </body> </html>
Если устанавливаете на WordPress, то рекомендую использовать плагин «Simple Custom CSS», куда и поместите стили RuBizCSS3Modal. Просто скопируйте все стили в файле «RuBizCSS3Modal.css» и поместите их в плагин «Simple Custom CSS». У меня есть видеоинструкция по работе с данным плагином тут.
ШАГ 2: Привязываем к элементу
<!--===== OPEN RuBizCSS3Modal =====--> <a href="#open_RuBizCSS3Modal" class="RuBizCSS3Modal_button"> ОТКРЫТЬ RuBizCSS3Modal </a> <!--===== / OPEN RuBizCSS3Modal =====-->
Вы можете привязать как к отдельному слову или тексту, так и к любой картинке. Просто заключите нужный элемент в тег «a», что сверху. В моем случае, к окну привязан текст «ОТКРЫТЬ RuBizCSS3Modal».
Если хотите настроить два окна, например как у меня на этой странице, то дабавьте к концу ID окна «2», или «3» и т.д. (как пример id="open_RuBizCSS3Modal2") Соответственно, для уникальной кнопки тоже добавьте то же число.
Как пример:
<!--===== Открыть RuBizCSS3Modal 2 =====--> <a href="#open_RuBizCSS3Modal2" class="RuBizCSS3Modal_button"> ОТКРЫТЬ RuBizCSS3Modal 2 </a> <!--===== RuBizCSS3Modal 2 =====--> <div id="open_RuBizCSS3Modal2" class="RuBizCSS3Modal"> ... </div> ... <!--===== Открыть RuBizCSS3Modal 3 =====--> <a href="#open_RuBizCSS3Modal3" class="RuBizCSS3Modal_button"> ОТКРЫТЬ RuBizCSS3Modal 3 </a> <!--===== RuBizCSS3Modal 3 =====--> <div id="open_RuBizCSS3Modal3" class="RuBizCSS3Modal"> ... </div>
ШАГ 3: Настраиваем окно
<!--===== RuBizCSS3Modal =====-->
<div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal">
<!-- закрываем окно кликая вне окна -->
<a href="#x" class="o_close_RuBizCSS3Modal"></a>
<!-- контент -->
<div class="RuBizCSS3Modal_content effect1">
<div class="rb_zagolovok">Чтобы посмотреть это видео</div>
<center>
<div class="rb_text">Вам <u>необходимо ввести</u><br />
<strong>Ваше Имя и Ваш E-Mail</strong> под картинкой.
</div>
<div class="rb_text">Ссылка на видео будет в письме.</div>
<div class="rb_text">+ секретный бонус...</div>
</center>
<!-- закрываем окно кликая на крестик -->
<a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a>
</div>
</div>
<!--===== / RuBizCSS3Modal =====-->
Вы можете поместить этот код в любое место на сайте, желательно, где-то в конце — около </body>
Также, заметьте, у окна указан «эффект 1», т.е. смотрите тут
<div class="RuBizCSS3Modal_content effect1">. С обновлениями будут доступны и другие эффекты, т.е. «effect2» и т.д.
ВСЕ ПРИМЕРЫ:
Вариант с видео
<!--===== RuBizCSS3Modal =====-->
<div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal">
<!-- закрываем окно кликая вне окна -->
<a href="#x" class="o_close_RuBizCSS3Modal"></a>
<!-- контент -->
<div class="RuBizCSS3Modal_content effect1">
<div class="rb_zagolovok">RuBizPanel 2.0</div>
<center>
<div class="rb_text">Скрытая эффектная ниндзя CSS3 панель для блоггера, инфобизнесмена и инфомаркетера.</div>
<div class="rb_text">
<div class="RuBizCSS3Modal_VideoArea">
<iframe src="https://www.youtube.com/embed/XINsLSka_es?modestbranding=1;rel=0;autohide=2;controls=2;"allowfullscreen></iframe>
</div>
</div>
</center>
<!-- закрываем окно кликая на крестик -->
<a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a>
</div>
</div>
<!--===== / RuBizCSS3Modal =====-->
Вариант с картинкой (JPG/PNG/GIF)
<!--===== RuBizCSS3Modal =====-->
<div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal">
<!-- закрываем окно кликая вне окна -->
<a href="#x" class="o_close_RuBizCSS3Modal"></a>
<!-- контент -->
<div class="RuBizCSS3Modal_content effect1">
<div class="rb_zagolovok">Поздравляю!</div>
<center>
<div class="rb_text">Вы открыли RuBizCSS3Modal!</div>
<img src="https://sergeychunkevich.com/demo/images/carlton.gif" style="width: 350px !important; height: auto !important;">
</center>
<!-- закрываем окно кликая на крестик -->
<a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a>
</div>
</div>
<!--===== / RuBizCSS3Modal =====-->
Вариант с формой подписки
<!--===== RuBizCSS3Modal =====-->
<div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal">
<!-- закрываем окно кликая вне окна -->
<a href="#x" class="o_close_RuBizCSS3Modal"></a>
<!-- контент -->
<div class="RuBizCSS3Modal_content effect1">
<div class="rb_zagolovok">Вы на пол пути к ...</div>
<center>
<div class="rb_text">
<i class="fa fa-arrow-down"></i>
ШАГ 2: Введите Ваше Имя и Ваш E-Mail внизу:
<i class="fa fa-arrow-down"></i>
</div>
<div class="RuBizCSS3Modal_optin">
<!-- ФОРМА -->
<form>
<input class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" />
<input class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" />
<input type="submit" value="ШАГ 3: ПОЛУЧИТЬ ➤" />
</form>
<!-- / ФОРМА -->
</div>
<div class="rbmodal_nospam">Никакого спама. Отписаться можно в каждом письме.</div>
</center>
<!-- закрываем окно кликая на крестик -->
<a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a>
</div>
</div>
<!--===== / RuBizCSS3Modal =====-->
Вариант с формой подписки
+ индикатор (триггер)
<!--===== RuBizCSS3Modal =====-->
<div id="open_RuBizCSS3Modal13" class="RuBizCSS3Modal">
<!-- закрываем окно кликая вне окна -->
<a href="#x" class="o_close_RuBizCSS3Modal"></a>
<div class="RuBizCSS3Modal_content effect5">
<!-- контент -->
<div class="rb_zagolovok">
<!-- red/orange/blue/green/grey -->
<div class="rb_progressbar rb_green">
<span style="width: 80%">80%</span>
</div>
<!-- закрываем окно кликая на крестик -->
<a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal2">X</a>
</div>
<center>
<div class="rb_text">
<i class="fa fa-arrow-down"></i>
Отлично! Осталось ввести лишь:
<i class="fa fa-arrow-down"></i>
</div>
<div class="RuBizCSS3Modal_optin">
<!-- ФОРМА -->
<form>
<input class="rubizproject-optin_name" type="text" placeholder="Ваше Имя" />
<input class="rubizproject-optin_email" type="text" placeholder="и Ваш Email" />
<input type="submit" value="ЗАПИСАТЬСЯ! >" />
</form>
<!-- / ФОРМА -->
</div>
<div class="rbmodal_nospam">Никакого спама. Отписаться можно в каждом письме.</div>
</center>
</div>
</div>
<!--===== / RuBizCSS3Modal =====-->
Обратите внимание на выделенные синей заливкой места. Вы можете выбрать цвет индикатора: rb_red / rb_orange / rb_blue / rb_green / rb_grey, а также установить свой процент. Процент нужно поменять в двух местах. Рекомендую оставить как есть.
КАК подключить форму подписки:
КАК подключить SendPulse тут:
Создать код формы подписки в сервисе: SendPulse
ИНСТРУКЦИЯ подключения: КАК подключить SendPulse
<div class="sp-form sp-form-regular sp-form-embed">
<div class="sp-message"><div>div>div>
<div id="droppableArea" class="sp-element-container ui-sortable ui-droppable">
<div class="rubizproject-optin_input" sp-id="0000000000000000">
<input type="text" sp-type="input" name="sform[00000000]" class="rubizproject-optin_name" placeholder="Введите Ваше Имя" sp-tips="%7B%22required%22%3A%22%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%B5%22%7D" spellcheck="false" autocorrect="off" required="required">
div>
<div class="rubizproject-optin_input" sp-id="0000000000000000">
<input type="email" sp-type="email" name="sform[email]" class="rubizproject-optin_email" placeholder="Введите Ваш Email" sp-tips="%7B%22required%22%3A%22%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%B5%22%2C%22wrong%22%3A%22%D0%9D%D0%B5%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20email-%D0%B0%D0%B4%D1%80%D0%B5%D1%81%22%7D" spellcheck="false" autocorrect="off" required="required">
div>
div>
<div class="rubizproject-optin_button" sp-id="0000000000000000">
<button id="0000000000000000" class="sp-button">Получить прямо СЕЙЧАС ➤button>
div>
div>
<script type="text/javascript" src="//cdn.sendpulse.com/apps/fc3/build/default-handler.js">script>
КАК подключить GetResponse тут:
Создать код формы подписки в сервисе: GetResponse
ИНСТРУКЦИЯ подключения: КАК подключить GetResponse
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input class="rubizproject-optin_name" type="text" name="first_name" placeholder="Введите Ваше Имя" autocomplete="name" x-autocompletetype="name" spellcheck="false" autocapitalize="off" autocorrect="off"/><br/>
<input class="rubizproject-optin_email" type="text" name="email" placeholder="Введите Ваш E-Mail" autocomplete="email" x-autocompletetype="email" spellcheck="false" autocapitalize="off" autocorrect="off"/><br/>
<input type="hidden" name="campaign_token" value="*****" />
<input type="hidden" name="thankyou_url" value=""/>
<input type="hidden" name="forward_data" value="" />
<input type="submit" value="Получить прямо СЕЙЧАС ➤"/>
form>
КАК подключить FalconSender тут:
Создать код формы подписки в сервисе: FalconSender
ИНСТРУКЦИЯ подключения: КАК подключить FalconSender
<form method="post" action="https://falconsender.ru/subscribe.html" >
<div class="rbp-input">
<input name="field_name_first" class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" autocomplete="off" required />
<input name="field_email" class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" autocomplete="off" required />
<input type="submit" value="Получить прямо СЕЙЧАС ➤" />
div>
form>
КАК подключить MassDelivery тут:
Создать код формы подписки в сервисе: Как подключить MassDelivery
ИНСТРУКЦИЯ подключения: MassDelivery
<form method="post" action="https://massdelivery.ru/subscribe.html" > <div class="rbp-input"> <input name="field_name_first" class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" autocomplete="off" required /> <input name="field_email" class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" autocomplete="off" required /> <input type="submit" value="Получить прямо СЕЙЧАС ➤" /> div> form>
ВСЕ эффекты появления окна:
<div class="RuBizCSS3Modal_content effect1"> — просто поставьте «2» или «3», и Вы поменяете тем самым эффект появления окна:
Все еще выглядит сложно?
Устанавливаем на обычный HTML сайт:
Устанавливаем на WordPress:
дополнительно:
(06.07.2020)
1.4
* ИСПРАВЛЕНО: окно не закрывалось при нажатии именно на крестик.
* ПОПРАВИЛ: крестик не подчеркивается на некоторых WordPress темах.
* ФИКС: Центровка окна не работала на IE11.
1.3
* Новый вариант с индикатором
* Маленькие фиксы в коде
1.2
* Добавлены четыре эффекта:
1) effect4 - Оппа! А вот и я!
2) effect5 - падение окна сверху
3) effect6 - поворот окна по оси Y
4) effect7 - появление окна посредством мигания
* улучшена адаптация для моб.девайсов
* адаптированы коды форм под такие сервисы как: SendPulse, Getresponse и MailerLite
1.1
* Добавлены два эффекта (effect2 и effect3)
* Добавлен новый вариант "подписная форма"
* Мелкие изменения в коде
1.0
Релиз
Ваше Имя и Ваш E-Mail под картинкой.
<!-- JustClick форма | Видеоинструкция: http://youtu.be/DtDEKFA7Mf4 --> <script language="JavaScript" src="http://ibusiness.justclick.ru/media/subscribe/helper2.js.php"></script> <form> <div class="RuBizCSS3Modal-input"> <input name="lead_name" type="text" id="name" class="name" placeholder="ШАГ 2: Введите Ваше Имя" autocomplete="off" /> <input name="lead_email" type="text" id="email" class="email" placeholder="ШАГ 3: Введите Ваш E-Mail" autocomplete="off" /> <input name="lead_subscribe" id="button" type="submit" value="ШАГ 4: Получить по E-Mail >" title="ШАГ 4: Получить по E-Mail >" /> </div> <script language="JavaScript">jc_setfrmfld()</script> </form> <!-- / JustClick форма -->X
<!-- GetResponse форма | Видеоинструкция: http://youtu.be/woT6VsQmOyU --> <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html" method="post"> <div class="RuBizCSS3Modal-input"> <input name="name" class="name" type="text" placeholder="ШАГ 2: Введите Ваше Имя" autocomplete="off" /> <input name="email" class="email" type="text" placeholder="ШАГ 3: Введите Ваш E-Mail" autocomplete="off" /> <input type="submit" name="submit" value="ШАГ 4: Получить по E-Mail >" /> <input type="hidden" name="webform_id" value="123456"/> </div> </form> <script type="text/javascript" src="https://app.getresponse.com/view_webform.js?wid=123456&mg_param1=1"></script> <!-- / GetResponse форма -->X
Здравствуйте! Хорошо сделано! Вы автор данного скрипта?
Здравствуй, Марат!
В тексте так и написал: «Нет аналогов».
Конечно, в и-нете есть похожее, но так, как сделал я — никто еще не делал.
Тема интересная, но до конца не раскрыта. В исходных файлах отсутствует часть програмного кода.
Олег, все на месте. 🙂
Нужен всего CSS файл, а инструкция по установке тут — на этой странице.
Что значит «не до конца раскрыта»?
CSS файл в архиве есть, но он не полный. Отсутствуют часть стилей указанные в инструкции. Например open_RuBizCSS3Modal2.
Олег, перед тем как делать вывод, убедитесь вначале в том, что Вы правы 🙂 .
open_RuBizCSS3Modal2 — это якорь ID, т.е. якорь для открытия окна.
Стили в данном случае для класса class="RuBizCSS3Modal"
В данном случае ID меняется при добавлении нового окна, поэтому, чтобы стили сохранить для всех окон — создается class="RuBizCSS3Modal"
Это же основы...
P.S. Будте внимательны в следующий раз перед поспешными выводами.
Уважаемый Сергей! Я, уважаю Ваш труд и не хотел Вас обидеть. Просто, Я, ожидал в скачанном мной архиве увидеть рабочие исходники.
Олег, я вначале хотел сделать рабочие варианты и поместить в архив...Но зачем?
В любом случае, все нужно копировать со страниц и вставлять к себе на сайт. Тут же, на этой странице, все показано детально, и даже показано в видео.
Есть кнопка «скачать», и всегда можно узнать о новом обновлении. 🙂
Кстати, уже готова версия 1.1 с новыми фишками. Доступна будет с 10-ым выпуском журнала.
Спасибо!
есть баг окна с видео: не заканчивается при нажатии креста, или в любое другое место.
Здравствуй, Дима!
Нет, это не баг :).
Чтобы видео выключалось автоматически, нужен специальный JavaScript (обращение к YouTube API), а это уже другая история.
Можно, конечно, написать и другой JS, но это уже обращаться к программистам нужно. Если кто-то предложит такой скрипт без jQuery, то я успешно его внедрю в проект.
P.S. Кстати, скоро новые обновления.
Не могу вставить модальное окно в джумла 2.5. Разобрал сайт на кирпичики оказалось не роботает когда в есть тег echo '';
Перестало работать в Opere/ при нажатии на любую область выдает в адрессе /#x
Спасибо за полезное видео и подробные объяснения! Вы мне очень помогли!
Замечательная возможность улучшить сайт модальными окнами.
Возникли вопросы: Есть ли возможность как-то контролировать размер видео при показе. Ширина окна, из-за его резиновости регулируется длинной надписи Оглавления.
Здравствуйте, А.Саган!
Да, можно контролировать. Для этого нужно открыть файл RuBizCSS3Modal.css и найти:
/* КОНТЕНТ -----------------------------------------------------*/ .RuBizCSS3Modal_content { background: #fff; max-width: 620px; min-width: 290px;Как Вы тут видите, максимальная ширина уже установлена: 620px. Т.е. окно будет растягиваться до 620px. Укажите меньше, если Вам это необходимо.
Здравствуйте, вроде всё сделал по вашей инструкции .
Но не заработало, окно не открывается .
Подсказать хоть сможете, что Я не так сделал ?
Я файл вам скину.
Здравствуйте, Александр!
Вроде все ок — работает. Я поместил стили СРАЗУ перед
</head>. Вообще никаких проблем со стилями, т.е. конфликтов нет.Возможно, что Вы указываете неправильный путь к файлу «RuBizCSS3Modal.css», поэтому и не работает. Это легко проверить: если информация, что должна быть в окне — видна на сайте, значит стили не подключены, т.е. они не скрывают окно. Проверьте путь. Указать правильный просто: проверьте путь к другим файлам css (это в
<head>). Затем, поместите в ту же папку «RuBizCSS3Modal.css», где находятся другие css файлы. И все.Кстати, симпатичная тема. Но косяк таких тем в том, что они загромождены стольким барахлом, что пока разберешься — уходит время. Да еще пока удалишь лишнее...
Спасибо за ответ Сергей .
Но путь к файлу я переименовал .
Я понимаю что Я где то накосячил .
Но где не пойму
Окно всплывает .
Но в футере и на всю ширину.
Плимс-плимс, мана-мана)) — это же просто ЖИР!!! Сергей, в очередной раз ОГРОМНЕЙШЕЕ Вам спасибище!
Сергей, огромное Вам спасибо за материал. Все отлично сработало. Окна с отредактированным текстом открываются и закрываются согласно прописанному алгоритму.
Но вот одна беда. По результату проделанных манипуляций в Dreamweawer после вкладок Исходный код, style.css и присоединенного rubizcss3modal.css народились еще пять пустых вкладок: rubirubizcss.css, rubizcss3modal.css, rubizrubizcss3modal.css, rubrubizcss3modal.css и rurubizcss3modal.css и все с пояснением, что данный ***********.css находятся не на локальном диске. Не подскажите как это побороть?
Упс... Проблема решена. Оказывается ларчик просто открывался.
Еще раз огромное спасибо за материал.