Intro.js: выделенная область не работает должным образом

Я использую очень интересную библиотеку javascript intro.js.

Однако в моем приложении высокая область становится почти полностью белой.

Я предполагаю, что это какой-то конфликт CSS, но что я могу сделать, чтобы определить причину этой проблемы?

Ответ 1

Извлечено из номера № 109 (https://github.com/usablica/intro.js/issues/109):

.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

Это решит вашу проблему. Надеюсь, это поможет, как и для меня! Привет @weili1977 и @exoJSON, которые предоставили ответ в GitHub.

Ответ 2

Это обычное явление для пользователей, использующих элемент строки таблицы. Я решаю свою проблему, добавляя эти строки в css.

.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }

Ответ 3

Я установил позицию целевого элемента в абсолютную (в соответствующем CSS), и теперь она работает! см. здесь http://prntscr.com/1dl0db

Ответ 4

Проблема может быть исправлена установкой абсолютной позиции для родительского элемента:

.introjs-fixParent {
  position: absolute !important;
}

Ответ 5

Я не видел ни одного jsFiddle или любого онлайн-примера вашей проблемы, но я стараюсь ответить на ваш вопрос таким образом:

Кажется, вы используете другую библиотеку пользовательского интерфейса, такую как ExtJs или что-то еще, убедитесь, что у вас нет конфликтов CSS.
Попробуйте изменить data-intro и data-step в другом элементе, например, если теперь у вас есть data-intro и data-step в элементе form, измените его на верхний элемент или div.

Ответ 6

В Introjs.css установка z-index в 1 для класса introjs-helperlayer устраняет эту проблему. Однако я не знаю полного значения этого изменения.

Ответ 7

Вы пытаетесь выделить таблицу Row()? Если это так, я тоже испытал эту проблему. Кто-то опубликовал исправление в разделе вопросов github: https://github.com/usablica/intro.js/issues/146

Ответ 8

Мне удалось получить полезный результат с этим:

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}