Перейти к публикации
IPS Invision Community
  • Модальное окно без плагина


    Sipsb
     Поделиться

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

    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;
    }

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

     Поделиться


    Отзывы пользователей

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

    Нет комментариев для отображения



    Создайте аккаунт или войдите в него для комментирования

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

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

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

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

    Войти

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

    Войти сейчас

×
×
  • Создать...
Вверх
Вверх