Dismiss Notice
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

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

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

Discussion in 'Вопросы- ответы' started by Somon, Oct 31, 2018.

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

    Somon Новичок

    Joined:
    Mar 27, 2016
    Messages:
    46
    Best Answers:
    0
    Ratings:
    +0 / 0 / -0
    Здравствуйте, уважаемые дизайнеры! Проблема с модальным окном!
    Вообщем суть проблемы такова:
    Есть баннер, по середине.
    Вот код:


    Code:
    <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, Oct 31, 2018
    Last edited by a moderator: Nov 1, 2018
  2. Ботяра

    Забанен

    Joined:
    Oct 10, 2015
    Messages:
    0
    Best Answers:
    54
    Ratings:
    +711 / 74 / -0
    не вижу проблем с модальными окнами - их тьма в интернете есть на шару выложены - LMGTFY - просто выбираешь нужное и проверенное которое работает правильно.
     
Яндекс.Метрика