Как работает intro.js?

У меня есть экскурсия на https://my.bonify.de/. Он предлагает аналогичный опыт для introjs.

Мы реализовали это очень безобразно, используя вырезанный div с очень большой тенью. Мы хотели бы улучшить это и использовать оверлей, такой как introjs, поскольку он, кажется, имеет гораздо лучшую производительность, чем наш грязный хак.

Прочитав это, я не понимаю, как работает introjs, так как подсвечиваемый элемент должен определенно находиться в более низком стековом контексте.

Я попытался повторить поведение с нашей собственной адаптацией, но не могу заставить элемент на странице подняться над оверлеем.

Я хотел бы знать, как introjs достигает этого, я думал, что этот блок кода был секретом, но когда я ставил отладчик, класс не добавлялся.

Источник

2 ответа

Решение

Легко, вы просто помещаете относительный элемент с более высоким z-индексом поверх фиксированного элемента. Образцы занятий:

.fixed-elem {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  background: rgba(0,0,0,0.75);
}
.relative-elem {
  position:relative;
  z-index:10;
}

Вот рабочая скрипка: https://jsfiddle.net/7ergcfvq/1/

Источник

Посмотрите на демонстрационный шаг 1 в intro.js, <h1>Intro.js</h1> элемент имеет .introjs-relativePosition а также .introjs-showElementвот так получилось position:relative а также z-index:9999999!important,

И <div class="intros-overlay">Z-индекс 999999, меньше чем <h1> & <div class="introjs-helperLayer">

Источник
Другие вопросы по тегам