introjs: при использовании встроенных фоновых изображений появляется над всплывающим окном

im, используя introjs, но у меня есть проблема в некоторых страницах сайта. У меня есть всплывающее окно, которое появляется перед страницей, однако, когда я вызываю intro и указываю на элементы во всплывающем окне, изображения в фоновом режиме появляются над всплывающим окном (см. Изображение), без ввода всплывающее окно выглядит нормально. И в других страницах я сделать то же самое, но все работает хорошоintrojs: при использовании встроенных фоновых изображений появляется над всплывающим окном

CSS-код моего всплывающего окна, как это:

#popup_modal { 
    /* position: fixed; */ 
    position: absolute !important; 
    height: 100%; 
    top: 50px; 
    width: 98%; 
    left: 1%; 
    z-index: 99999999; 
    overflow: hidden; 
} 
#popup { 
    padding: 20px; 
    border: 1px solid #007793; 
    width: 470px !important; 
    min-height: 162px; 
    margin-top: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #F6F6F6; 
    border-radius: 4px; 
    box-shadow: 5px 5px 20px #666; 
}

EDIT:

#popup_modal { 
    /* position: fixed; */ 
    position: absolute !important; 
    height: 100%; 
    top: 50px; 
    width: 98%; 
    left: 1%; 
    z-index: 9999 !important; 
    overflow: hidden; 
} 
#popup { 
    padding: 20px; 
    border: 1px solid #007793; 
    width: 470px !important; 
    min-height: 162px; 
    margin-top: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #F6F6F6; 
    border-radius: 4px; 
    box-shadow: 5px 5px 20px #666; 
}

Introjs css:

.introjs-helperLayer { 
    position: absolute; 
    z-index: 9999998; 
    background-color: #FFF; 
    background-color: rgba(255,255,255,.9); 
    border: 1px solid #777; 
    border: 1px solid rgba(0,0,0,.5); 
    border-radius: 4px; 
    box-shadow: 0 2px 15px rgba(0,0,0,.4); 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}

источник

2016-08-10 terrorista

Попытка добавления position: relative в CSS для #popup, чтобы заставить отводками быть вычислено:

#popup { 
 
    padding: 20px; 
 
    border: 1px solid #007793; 
 
    width: 470px !important; 
 
    min-height: 162px; 
 
    margin-top: 100px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: #F6F6F6; 
 
    border-radius: 4px; 
 
    box-shadow: 5px 5px 20px #666; 
 
    z-index: 999999999; 
 
    position: relative; // Default value is "static" but "relative" will cause layering to occur 
 
}

значения Z-индекс, как правило, игнорируются в статически расположенных элементов, в результате чего странно когда у вас есть другие элементы, которые используют разные типы позиционирования.

источник

2016-08-10 16:24:06

это происходит то же самое:/ – terrorista

я замечаю, что вы отредактировали вопрос, чтобы удалить значение Z-индекс от '# popup'. Вы тоже захотите иметь это там, как в моем примере. Если он все еще не работает, тогда будет сложно предложить что-нибудь еще, не изучая CSS для элементов, которые показывают. –

Также возможно, что intro.js устанавливает индекс z во всплывающем окне, в результате чего он перекрывается другими элементами. Если это так, вы можете установить его с помощью! Важно и посмотреть, поможет ли это (по крайней мере, определить, почему это происходит). Опять же, трудно сказать, не изучая CSS. Если вы можете предоставить пример JSFiddle или указать нам страницу, где это расположено, это поможет тонну. –

В моем случае у меня был

После добавления встроенного стиля литий элемент боковой панели: и добавление свойства (стиль = «цвет фона # 347D87 важно!») «Позицию: абсолютная» класса 'introjs-fixedTooltip' в оригинальном файле introjs.css, который работал !!!