Перейти к содержанию
IPS Invision Community 🇷🇺
  • Модальное окно без плагина

    Модальное окно без плагина

    Скрытый текст

    01.png

    Делаем модальное окно стандартными средствами IPS 4

    HTML

    <a class="ipsButton ipsButton_negative ipsButton_verySmall ipsButton_narrow"href='#dialogContent' data-ipsDialog data-ipsDialog-content='#dialogContent' data-ipsTooltip title='Заказать рекламу'><i class="fa fa-plus-circle" aria-hidden="true"></i> Получить код баннера</a>
    <div id="dialogContent" class='ipsHide'>
    <div class="ADS_blockContent">
     <h2>Вероятнее всего вас интересуют рекламные места.</h2>
    <p class="desc">На нашем форуме вы можете купить рекламное место в различных разделах.<br>
            Так же мы можем предложить уникальный вариант вашей рекламы, для этого вам нужно зайти в тему информации о рекламе и внимательно ознакомится с предложением.</p>
            
    <h3>Возможные места под рекламные баннеры.</h3>
     <a href="https://sites.ru/" data-ipsdialog="" data-ipsdialog-title="Добавить заметку" class="ipsPos_right ipsButton ipsButton_light ipsButton_verySmall ipsButton_narrow">
            <i class="fas fa-mail-bulk"></i> Перейти в тему информации</a> 
       
    <div class="ipsGrid ipsGrid_collapsePhone ipsPad">
    <div class="ipsGrid_span7">       
    <ul class="ADS_list">
        <li>Над категориями</li>
    	<li>В новой категории любого раздела (в разработке)</li>
    	<li>В боковых блоках форума</li>
    	<li>После первой темы в каждом разделе</li>
    	<li>После первого сообщения в каждой теме</li>
    	<li>Уникальный вариант рекламы смотрите в теме информации</li> 
    </ul>       
    </div>
    <div class="ipsGrid_span5">
    <ul class="ADS_list">
      	<li>В каталоге сайтов</li>
    	<li>В каталоге файлов</li>
    	<li>В списке отзывов</li>
    	<li>В списке новостей</li>
    	<li>В меню форума</li> 
      	<li>В профилях пользователей</li> 
    </ul> 
      </div>
        </div>
    
    <hr class="ipsHr">
      </div></div>

    Добавляем в custom.css

    .ADS_blockContent {
    background-image: url(Ссылка на фоновое изображение) !important;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        min-height: 400px;
        max-height: 700px;
        width: auto;
        box-shadow: 0px 0px 10px 0px #3a3a547a;
        border: 3px solid #262735;
        padding-left: 12px;
        padding-right: 12px;
    }
    .ADS_headline {
        position: relative;
        font-size: 25px;
        font-weight: 400;
        color: #3399cc;
        margin: 10px 0;
    }
    .ADS_list {
        list-style: none;
        font-size: 15px;
        letter-spacing: -0.03rem;
        padding: 0;
    }
    .ADS_list li {
        padding-left: 30px;
        margin-bottom: 10px;
        line-height: 1.3;
    }
    .ADS_list li:before {
        -webkit-box-shadow: 0px 0px 0px 2px #3399cc;
        box-shadow: 0px 0px 0px 2px #3399cc;
        content: '\f00c';
        font-family: 'FontAwesome';
        text-align: center;
        display: block;
        float: left;
        width: 15px;
        height: 15px;
        line-height: 15px;
        border-radius: 15px;
        color: #3399cc;
        font-size: 11px;
        margin-left: -25px;
        vertical-align: middle;
    }

    Подобных окон можно делать сколько душа пожелает.

    Было ли это полезно?

    Sipsb

    Обратная связь

    Рекомендуемые комментарии

    Комментариев нет



    Создайте учетную запись или войдите, чтобы комментировать

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти
×
×
  • Создать...

Важная информация

Мы используем файлы cookie и другие средства сохранения предпочтений и анализа действий посетителей сайта. Нажмите «Принять», если даете согласие на это. Политика конфиденциальности - Условия использования

Вверх
Вверх