Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Вопрос? Проблема с модальным окном

Тема в разделе "Вопросы- ответы", создана пользователем Somon, 31 окт 2018.

31.10.18 в 20:15
01.11.18 в 08:07
1
193
0
  1. TopicStarter Overlay
    Somon

    Somon Новичок

    Регистрация:
    27 мар 2016
    Сообщения:
    46
    Лучших ответов:
    0
    Рейтинги:
    +0 / 0 / -0
    Здравствуйте, уважаемые дизайнеры! Проблема с модальным окном!
    Вообщем суть проблемы такова:
    Есть баннер, по середине.
    Вот код:


    Код:
    <div class="html-blockokno html-block_bottomokno">
    <style>
    .html-block_bottomokno{
    width: 800px;
    height: 550px;
    text-align: center;
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index:1;
    }
    .html-blockokno{
    display:inline-block;
    text-align:center;
    }
    .banner-wrapper-1232131asa{
    position:absolute;
    }
    .banner-close-1232131asa{
    position:absolute;
    top:-33px;
    right:20px;
    width:40px;
    height:33px;
    color:#fff;
    font:30px/33px Arial,sans-serif;
    text-align:center;
    border-radius:5px 5px 0 0;
    background:#002f5e;
    cursor:pointer
    }
    .banner-link-1232131asa,.banner-image-1232131asa{
    display:block;
    }
    @media (min-width: 1020px) {
    .banner-image-1232131asa{
    width:800px;
    height:570px;
    text-align: center;
    background-image:url(/img/800x600.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-color:#212129
    }
    }
    </style>
    <div class="banner-wrapper-1232131asa" id="bannerNode1232131asa">
    <span class="banner-close-1232131asa" id="closeNode1232131asa">×</span>
    <a class="banner-link-1232131asa" target="blank" onclick="yaCounter42152454.reachGoal('1xbetclick'); return true;" href="http://refpaqqm.host/L?tag=s_103339m_14255c_d548_l1643_banner&site=103339&ad=14255" id="linkNode1232131asa">
    <span class="banner-image-1232131asa"></span>
    </a>
    </div>
    
    <script>
    (function(){
    var bannerNode=document.getElementById('bannerNode1232131asa');
    var crossNode=document.getElementById('closeNode1232131asa');
    var linkNode=document.getElementById('linkNode1232131asa');
    
    if(sessionStorage.getItem('banner1232131asa')==='closed'){
    bannerNode.innerHTML='';return
    }else{
    (function() {
    var token = Math.random();
    var code = document.createElement("script");
    code.type = "text/javascript";
    code.async = true;
    code.src = "http://site.ru/";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(code, s);
    })();
    }
    
    crossNode.addEventListener('click',function(){sessionStorage.setItem('banner1232131asa','closed');bannerNode.innerHTML=''})
    })();
    </script>
    </div>
    Когда в html-block_bottomokno ставишь условия:
    z-index:1; то он будет поверх всех других материалов, но проблема в том что когда закрываешь его все ровно центр экрана не кликабельная. То есть как будь-то все ещё баннер не закрыть и поэтому невозможно кликать по контенту.
    В чем может быть проблема? Посмотрите пожалуйста, код!

    Смотрите...Это всплывающее модальное окно, с кнопкой закрытия.
    Если ты открываешь новую вкладку и набираешь название сайта то он открывается и ты закрывая его можешь в данной вкладке переходить сколько угодно по сайту на другие релизы, посты. Ну так вот я делаю так чтобы в середине был сам модальный окно с кнопкой закрытия. Все проходить, но одно но тут центр под размер 800х600 который мы фиксируем через див для модального окна под баннер, остается фиксированной после закрытия модального окна. Есть ли какое нибудь решение на CSS или можете например привести пример всплывающего модального окна с закрытием под размер 800х600. Чтобы внутрь окна был 800х600 с кнопкой закрытия.
     
    #1 Somon, 31 окт 2018
    Последнее редактирование модератором: 1 ноя 2018
  2. byroot

    Забанен

    Регистрация:
    10 окт 2015
    Сообщения:
    12.297
    Лучших ответов:
    54
    Рейтинги:
    +5.205 / 74 / -0
    не вижу проблем с модальными окнами - их тьма в интернете есть на шару выложены - LMGTFY - просто выбираешь нужное и проверенное которое работает правильно.
     
Похожие темы
  1. Wizyn4ik
    Ответов:
    16
    Просмотров:
    1.833
  2. Betmenko
    Ответов:
    6
    Просмотров:
    865
  3. Avenger
    Ответов:
    10
    Просмотров:
    2.573
  4. soprikin-dima
    Ответов:
    2
    Просмотров:
    412
Загрузка...
Яндекс.Метрика