javascript - intro.js 将底层元素向左移动并相互重叠

Question

我尝试在 meteor 元素上安装 intro.js:

我正在使用 bootstrap 3 和 meteor。我想知道元素的定位是否需要以不同的方式显示。

    var intro = introJs();

    intro.setOptions({
        steps: [
            {
                element: '#newGame',
                intro: 'welcome to step one'
            },
            {
                element: '#openModal',
                intro: 'step two challenge a friend'
            }
        ]
    });
    intro.start();



<a href="#" class="btn btn-primary" id="newGame">Play Random Opponent</a>
                        <button class="btn btn-primary" data-toggle="modal" id="openModal"
                                data-target="#challengeModal">Challenge a Friend</button>

Answer 1

我们看到了一个类似的问题，一旦一个元素被 introJS 定位，它就会附加一个名为 .introjs-relativePosition 的类，这会导致位置略微移动。

我们通过覆盖 CSS 中的规则解决了这个问题

.introjs-relativePosition {
  position: initial !important;
}