Стильное CSS3 модальное окно | RuBizCSS3Modal

Стильное 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 коду

Пока JustClick (Новый код) не доступен для моих проектов, но я уже решаю данную проблему. В скором времени НОВЫЙ код будет внедрен во ВСЕ мои проекты. Вернитесь позже...

КАК подключить форму к GetResponse коду

Пока GetResponse (Новый код) не доступен для моих проектов, но я уже решаю данную проблему. В скором времени НОВЫЙ код будет внедрен во ВСЕ мои проекты. Вернитесь позже...


ТРИ эффекта появления окна

<div class="RuBizCSS3Modal_content effect1"> — просто поставьте «2» или «3», и Вы поменяете тем самым эффект появления окна:


Все еще выглядит сложно?

Устанавливаем на обычный HTML сайт:
Устанавливаем на WordPress:

Видеообзор Shortcoder | Видеообзор Custom CSS

RuBizCSS3Modal [Версия 1.1]

(15.08.2015)

Ч�о нового? RuBizCSS3Modal

1.1
* Добавлены два эффекта (effect2 и effect3)
* Добавлен новый вариант "подписная форма"
* Мелкие изменения в коде
1.0
Релиз

X
Чтобы посмотреть это видео
Вам необходимо ввести
Ваше Имя и Ваш E-Mail под картинкой.
Ссылка на видео будет в письме.
+ секретный бонус...
X
RuBizPanel 2.0 | RuBizPanel.ru
RuBizPanel 2.0 - Скрытая эффектная ниндзя CSS3 панель для блоггера, инфобизнесмена и инфомаркетера.
С ее помощью Вы сможете эффектно и эффективно прорекламировать любой свой проект, например: PDF книгу, подписную страницу, продающую страницу и т.д.
X
Поздравляю!
Вы открыли RuBizCSS3Modal!
X
ОТЛИЧНО! ШАГ 1 сделан!
Введите Ваше Имя и Ваш E-Mail внизу:
Никакого спама. Отписаться можно в каждом письме.
X
ОТЛИЧНО! ШАГ 1 сделан!
Введите Ваше Имя и Ваш E-Mail внизу:
Никакого спама. Отписаться можно в каждом письме.
X
ОТЛИЧНО! ШАГ 1 сделан!
Введите Ваше Имя и Ваш E-Mail внизу:
Никакого спама. Отписаться можно в каждом письме.
X
Код для JustClick
Код настроен для сервиса JustClick
<!-- 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!
Код настроен для сервиса GetResponse
<!-- 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 форма -->
 


Понравилась статья? Поделись с друзьями:

Понравилась статья? Поделись с друзьями:


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

22 комментария

  1. Здравствуйте! Хорошо сделано! Вы автор данного скрипта?

  2. Олег:

    Тема интересная, но до конца не раскрыта. В исходных файлах отсутствует часть програмного кода.

  3. Олег:

    CSS файл в архиве есть, но он не полный. Отсутствуют часть стилей указанные в инструкции. Например open_RuBizCSS3Modal2.

    • Олег, перед тем как делать вывод, убедитесь вначале в том, что Вы правы 🙂 .

      open_RuBizCSS3Modal2 — это якорь ID, т.е. якорь для открытия окна.

      Стили в данном случае для класса class="RuBizCSS3Modal"

      В данном случае ID меняется при добавлении нового окна, поэтому, чтобы стили сохранить для всех окон — создается class="RuBizCSS3Modal"

      Это же основы...

      P.S. Будте внимательны в следующий раз перед поспешными выводами.

  4. Олег:

    Уважаемый Сергей! Я, уважаю Ваш труд и не хотел Вас обидеть. Просто, Я, ожидал в скачанном мной архиве увидеть рабочие исходники.

    • Олег, я вначале хотел сделать рабочие варианты и поместить в архив...Но зачем?

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

      Есть кнопка «скачать», и всегда можно узнать о новом обновлении. 🙂

      Кстати, уже готова версия 1.1 с новыми фишками. Доступна будет с 10-ым выпуском журнала.

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

    • Здравствуй, Дима!

      Нет, это не баг :).

      Чтобы видео выключалось автоматически, нужен специальный JavaScript (обращение к YouTube API), а это уже другая история.

      Можно, конечно, написать и другой JS, но это уже обращаться к программистам нужно. Если кто-то предложит такой скрипт без jQuery, то я успешно его внедрю в проект.

      P.S. Кстати, скоро новые обновления.

  6. Не могу вставить модальное окно в джумла 2.5. Разобрал сайт на кирпичики оказалось не роботает когда в есть тег echo '';

  7. Артем:

    Перестало работать в Opere/ при нажатии на любую область выдает в адрессе /#x

  8. Спасибо за полезное видео и подробные объяснения! Вы мне очень помогли!

  9. Замечательная возможность улучшить сайт модальными окнами.

    Возникли вопросы: Есть ли возможность как-то контролировать размер видео при показе. Ширина окна, из-за его резиновости регулируется длинной надписи Оглавления.

    • Здравствуйте, А.Саган!

      Да, можно контролировать. Для этого нужно открыть файл RuBizCSS3Modal.css и найти:

      
      /* КОНТЕНТ
      -----------------------------------------------------*/
      
      .RuBizCSS3Modal_content {
          background: #fff;
          max-width: 620px;
          min-width: 290px;
      
      

      Как Вы тут видите, максимальная ширина уже установлена: 620px. Т.е. окно будет растягиваться до 620px. Укажите меньше, если Вам это необходимо.

  10. Александр:

    Здравствуйте, вроде всё сделал по вашей инструкции .

    Но не заработало, окно не открывается .

  11. Александр:

    Подсказать хоть сможете, что Я не так сделал ?

    Я файл вам скину.

    • Здравствуйте, Александр!

      Вроде все ок — работает. Я поместил стили СРАЗУ перед </head>. Вообще никаких проблем со стилями, т.е. конфликтов нет.

      Возможно, что Вы указываете неправильный путь к файлу «RuBizCSS3Modal.css», поэтому и не работает. Это легко проверить: если информация, что должна быть в окне — видна на сайте, значит стили не подключены, т.е. они не скрывают окно. Проверьте путь. Указать правильный просто: проверьте путь к другим файлам css (это в <head>). Затем, поместите в ту же папку «RuBizCSS3Modal.css», где находятся другие css файлы. И все.

      • Кстати, симпатичная тема. Но косяк таких тем в том, что они загромождены стольким барахлом, что пока разберешься — уходит время. Да еще пока удалишь лишнее...

  12. Александр:

    Спасибо за ответ Сергей .

    Но путь к файлу я переименовал .

    Я понимаю что Я где то накосячил .

    Но где не пойму

  13. Александр:

    Окно всплывает .

    Но в футере и на всю ширину.

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

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

Есть вопросы?