Стильное CSS3 модальное окно | RuBizCSS3Modal
Создать модальное окно на jQuery — минутное дело... А что если у Вас сайт на WordPress или Joomla? По-прежнему это будет минутное дело? Да? Возможно, если Вы программист. Но, согласитесь, времени уйдет немало.
А что, если все уже готово, и Вам не нужно «нырять в функции»? А что, если «copy-paste» и заработало + просто текст в окне поменял? А что, если окно СОВСЕМ не будет мешать коду Вашего сайта? А что, если модальное окно на CSS3 и только? Ну неплохо же, согласитесь?
Мне пришлось повозиться несколько дней, чтобы:
1) создать окно именно на CSS3, и именно с плавными эффектами;
2) уменьшить количество кода до минимума;
3) сделать окно привлекательным и адаптивным;
4) сделать все понятным и работоспособным даже на Android;
5) без проблем добавлять новые варианты дизайна и эффекты появления окна.
Модальное окно RuBizCSS3Modal и примеры:
Зачем нужно такое окно? Что ж, вот Вам преимущества RuBizCSS3Modal:
легко установить на ЛЮБОЙ САЙТ;
без JavaScript-а, что еще более упрощает установку, например на WordPress блог, или сайт на Joomla!;
есть видеоинструкция, что ЕЩЕ БОЛЕЕ упрощает установку;
легко настроить под себя;
легко привязать к картинке, кнопке (ссылке) и т.д. ;
есть вариант с подписной формой для: SmartResponder, JustClick и GetResponse
нет похожих аналогов (я о гибкости кода и подходе к делу).
ШАГ 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"> <!--===== / RuBizCSS3Modal | Styles =====--> </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") Соответственно, для уникальной кнопки тоже добавьте то же число.
Как пример:
<a href="#open_RuBizCSS3Modal2" class="RuBizCSS3Modal_button"> ОТКРЫТЬ RuBizCSS3Modal 2 </a> <!--===== RuBizCSS3Modal 2 =====--> <div id="open_RuBizCSS3Modal2" class="RuBizCSS3Modal">...</div> <!--===== / RuBizCSS3Modal 2 =====--> <a href="#open_RuBizCSS3Modal3" class="RuBizCSS3Modal_button"> ОТКРЫТЬ RuBizCSS3Modal 3 </a> <!--===== RuBizCSS3Modal 3 =====--> <div id="open_RuBizCSS3Modal3" class="RuBizCSS3Modal">...</div> <!--===== / RuBizCSS3Modal 3 =====-->
ШАГ 3: Настраиваем окно
<!--===== RuBizCSS3Modal =====--> <div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal"> <!-- закрываем окно кликая вне окна --> <a href="#x" class="o_close_RuBizCSS3Modal"></a> <div class="RuBizCSS3Modal_content effect1"> <!-- закрываем окно кликая на крестик --> <a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a> <!-- контент (редактируем отсюда!) --> <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> </div> </div> <!--===== / RuBizCSS3Modal =====-->
Вы можете поместить этот код в любое место на сайте, желательно, где-то в конце — около </body>
Также, заметьте, у окна указан "эффект 1", т.е. смотрите тут
<div class="RuBizCSS3Modal_content effect1">. С обновлениями будут доступны и другие эффекты, т.е. "effect2" и т.д.
Вариант с видео
<!--===== RuBizCSS3Modal =====--> ... <!-- контент --> <div class="rb_zagolovok">Видеообзор Wunderlist</div> <center> <div class="rb_text">Продуктивность на 100%, или синхронизируйте свою жизнь</div> <div class="rb_text"> <div class="RuBizCSS3Modal_VideoArea"> <iframe src="https://www.youtube.com/embed/v9Nn9F7reFc?modestbranding=1;rel=0;autohide=2;controls=1;"allowfullscreen></iframe> </div> </div> </center> ... <!--===== / RuBizCSS3Modal =====-->
Многоточие означает все то же самое, что в «ШАГ 3», просто немного меняется контент.
Вариант с картинкой (JPG/PNG/GIF)
<!--===== RuBizCSS3Modal =====--> ... <!-- контент --> <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> ... <!--===== / RuBizCSS3Modal =====-->
Многоточие означает все то же самое, что в «ШАГ 3», просто немного меняется контент.
Вариант с формой подписки
<!--===== RuBizCSS3Modal =====--> ... <!-- контент --> <div class="rb_zagolovok">ОТЛИЧНО! ШАГ 1 сделан!</div> <center> <div class="rb_text"> <i class="fa fa-arrow-down"></i> Введите Ваше Имя и Ваш E-Mail внизу: <i class="fa fa-arrow-down"></i> </div> <div class="RuBizCSS3Modal_optin"> <!-- SmartResponder | Видеоинструкция: https://www.youtube.com/watch?v=Erefgw1uGGI --> <!-- ВСТАВЬТЕ СЮДА СКРИПТ Smartresponder --> <form name="SR_form" target="_blank" action="http://smartresponder.ru/subscribe.html" method="post" onsubmit="return SR_submit(this)"> <!-- ВСТАВЬТЕ СЮДА ПЯТЬ ИНПУТОВ --> <div class="RuBizCSS3Modal-input"> <input name="field_name_first" class="name" type="text" placeholder="ШАГ 2: Введите Ваше Имя" autocomplete="off" /> <input name="field_email" class="email" type="text" placeholder="ШАГ 3: Введите Ваш E-Mail" autocomplete="off" /> <input type="submit" name="SR_submitButton" value="ШАГ 4: Получить по E-Mail >" /> </div> </form> <!-- / SmartResponder | Форма подписки --> </div> <div class="rbmodal_nospam">Никакого спама. Отписаться можно в каждом письме.</div> </center> ... <!--===== / RuBizCSS3Modal =====-->
Многоточие означает все то же самое, что в «ШАГ 3», просто немного меняется контент.
Код для JustClick
Код для GetResponse
Пока JustClick (Новый код) не доступен для моих проектов, но я уже решаю данную проблему. В скором времени НОВЫЙ код будет внедрен во ВСЕ мои проекты. Вернитесь позже...
Пока GetResponse (Новый код) не доступен для моих проектов, но я уже решаю данную проблему. В скором времени НОВЫЙ код будет внедрен во ВСЕ мои проекты. Вернитесь позже...
ТРИ эффекта появления окна
<div class="RuBizCSS3Modal_content effect1"> — просто поставьте «2» или «3», и Вы поменяете тем самым эффект появления окна:
Все еще выглядит сложно?
RuBizCSS3Modal [Версия 1.1]
(15.08.2015)
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 форма -->
<!-- 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 форма -->
Здравствуйте! Хорошо сделано! Вы автор данного скрипта?
Здравствуй, Марат!
В тексте так и написал: «Нет аналогов».
Конечно, в и-нете есть похожее, но так, как сделал я — никто еще не делал.
Тема интересная, но до конца не раскрыта. В исходных файлах отсутствует часть програмного кода.
Олег, все на месте. 🙂
Нужен всего 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 файлы. И все.Кстати, симпатичная тема. Но косяк таких тем в том, что они загромождены стольким барахлом, что пока разберешься — уходит время. Да еще пока удалишь лишнее...
Спасибо за ответ Сергей .
Но путь к файлу я переименовал .
Я понимаю что Я где то накосячил .
Но где не пойму
Окно всплывает .
Но в футере и на всю ширину.