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

Опубликовано 24.05.2015 · Обновлено 06.07.2020

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

Пример с 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">
                <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», и Вы поменяете тем самым эффект появления окна:

effect1 effect2 effect3 effect4 effect5 effect6 effect7

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

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

Устанавливаем на WordPress:

дополнительно:

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

RuBizCSS3Modal v1.4
(06.07.2020)

СКАЧАТЬ «rubizcss3modal.css»

Что нового в обновлении?

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 под картинкой.

Ссылка на видео будет в письме.

+ секретный бонус...

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 форма -->

X

ОТЛИЧНО! ШАГ 1 сделан!

Введите Ваше Имя и Ваш E-Mail внизу:

Никакого спама. Отписаться можно в каждом письме.

X

ОТЛИЧНО! ШАГ 1 сделан!

Введите Ваше Имя и Ваш E-Mail внизу:

Никакого спама. Отписаться можно в каждом письме.

X

ОТЛИЧНО! ШАГ 1 сделан!

Введите Ваше Имя и Ваш E-Mail внизу:

Никакого спама. Отписаться можно в каждом письме.

X

ОТЛИЧНО! ШАГ 1 сделан!

Введите Ваше Имя и Ваш E-Mail внизу:

Никакого спама. Отписаться можно в каждом письме.

X

80%

X

Отлично! Осталось ввести лишь:

Никакого спама. Отписаться можно в каждом письме.

Поделиться или сохранить:

39
Поделились

Читайте также:

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

Комментарии23
Пингбэки0

Марат:

26.05.2015 в

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

Ответить
- Сергей Чункевич:
  
  26.05.2015 в
  
  Здравствуй, Марат!
  В тексте так и написал: «Нет аналогов».
  Конечно, в и-нете есть похожее, но так, как сделал я — никто еще не делал.
  
  Ответить
Олег:

11.09.2015 в

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

Ответить
- Сергей Чункевич:
  
  11.09.2015 в
  
  Олег, все на месте. 🙂
  Нужен всего CSS файл, а инструкция по установке тут — на этой странице.
  Что значит «не до конца раскрыта»?
  
  Ответить
Олег:

11.09.2015 в

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

Ответить
- Сергей Чункевич:
  
  11.09.2015 в
  
  Олег, перед тем как делать вывод, убедитесь вначале в том, что Вы правы 🙂 .
  open_RuBizCSS3Modal2 — это якорь ID, т.е. якорь для открытия окна.
  Стили в данном случае для класса class="RuBizCSS3Modal"
  В данном случае ID меняется при добавлении нового окна, поэтому, чтобы стили сохранить для всех окон — создается class="RuBizCSS3Modal"
  Это же основы...
  P.S. Будте внимательны в следующий раз перед поспешными выводами.
  
  Ответить
Олег:

11.09.2015 в

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

Ответить
- Сергей Чункевич:
  
  11.09.2015 в
  
  Олег, я вначале хотел сделать рабочие варианты и поместить в архив...Но зачем?
  В любом случае, все нужно копировать со страниц и вставлять к себе на сайт. Тут же, на этой странице, все показано детально, и даже показано в видео.
  Есть кнопка «скачать», и всегда можно узнать о новом обновлении. 🙂
  Кстати, уже готова версия 1.1 с новыми фишками. Доступна будет с 10-ым выпуском журнала.
  
  Ответить
Олег:

11.09.2015 в

Спасибо!

Ответить
дима:

06.11.2015 в

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

Ответить
- Сергей Чункевич:
  
  06.11.2015 в
  
  Здравствуй, Дима!
  Нет, это не баг :).
  Чтобы видео выключалось автоматически, нужен специальный JavaScript (обращение к YouTube API), а это уже другая история.
  Можно, конечно, написать и другой JS, но это уже обращаться к программистам нужно. Если кто-то предложит такой скрипт без jQuery, то я успешно его внедрю в проект.
  P.S. Кстати, скоро новые обновления.
  
  Ответить
Юрий:

13.11.2015 в

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

Ответить
Артем:

25.02.2016 в

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

Ответить
Наталья:

15.03.2016 в

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

Ответить
А.Саган:

17.09.2016 в

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

Ответить
- Сергей Чункевич:
  
  18.09.2016 в
  
  Здравствуйте, А.Саган!
  Да, можно контролировать. Для этого нужно открыть файл RuBizCSS3Modal.css и найти:
```
/* КОНТЕНТ
-----------------------------------------------------*/

.RuBizCSS3Modal_content {
    background: #fff;
    max-width: 620px;
    min-width: 290px;
```
  Как Вы тут видите, максимальная ширина уже установлена: 620px. Т.е. окно будет растягиваться до 620px. Укажите меньше, если Вам это необходимо.
  
  Ответить
Александр:

25.11.2016 в

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

Ответить
Александр:

25.11.2016 в

Подсказать хоть сможете, что Я не так сделал ?
Я файл вам скину.

Ответить
- Сергей Чункевич:
  
  25.11.2016 в
  
  Здравствуйте, Александр!
  Вроде все ок — работает. Я поместил стили СРАЗУ перед </head>. Вообще никаких проблем со стилями, т.е. конфликтов нет.
  Возможно, что Вы указываете неправильный путь к файлу «RuBizCSS3Modal.css», поэтому и не работает. Это легко проверить: если информация, что должна быть в окне — видна на сайте, значит стили не подключены, т.е. они не скрывают окно. Проверьте путь. Указать правильный просто: проверьте путь к другим файлам css (это в <head>). Затем, поместите в ту же папку «RuBizCSS3Modal.css», где находятся другие css файлы. И все.
  
  Ответить
  - Сергей Чункевич:
    
    25.11.2016 в
    
    Кстати, симпатичная тема. Но косяк таких тем в том, что они загромождены стольким барахлом, что пока разберешься — уходит время. Да еще пока удалишь лишнее...
    
    Ответить
Александр:

25.11.2016 в

Спасибо за ответ Сергей .
Но путь к файлу я переименовал .
Я понимаю что Я где то накосячил .
Но где не пойму

Ответить
Александр:

26.11.2016 в

Окно всплывает .
Но в футере и на всю ширину.

Ответить
Майкл:

04.10.2019 в

Плимс-плимс, мана-мана)) — это же просто ЖИР!!! Сергей, в очередной раз ОГРОМНЕЙШЕЕ Вам спасибище!

Ответить

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

Узнайте быстрее всех о НОВОМ
14-ом выпуске журнала
«Эффективные инструменты для бизнеса в интернет»

Эффективные инструменты для бизнеса в интернет

политика конфиденциальности