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

Posted 2023-03-08

【中文标题】intro.js 将底层元素向左移动并相互重叠

【英文标题】：intro.js moves underlying elements to the left and overlapping each other

【发布时间】：2015-01-19 03:54:25

【问题描述】：

我尝试在一个流星项目上安装 intro.js：

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

    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>

【问题讨论】：

你是如何在流星上安装 intro.js 的。

【参考方案1】：

目前在 webkit 浏览器上的 intro.js 存在问题。该库与 fireFox 和 IE 配合得很好，但是当涉及到 Chrome/Opera/Safari 时，它就有这个问题。问题在于z-index。

有关问题的详细信息，请访问： https://github.com/heelhook/chardin.js/issues/26

关于 z-index 如何与访问一起工作的详细说明： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

如果您想要与intro.js 相同的更简单的库，请查看guide.js https://github.com/Dozyatom/guide.js

【参考方案2】：

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

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

.introjs-relativePosition 
  position: initial !important;

【参考方案3】：

也许你可以在introJs 启动之前使用setTimeout 函数。下面的代码对我有用

setTimeout(function()  introJs().start(); , 5000);

【参考方案4】：

我找到了解决办法

我不是 CSS 人，但这很好用

.introjs-overlay 
    display: none !important;

.introjs-helperLayer 
border-radius: 0.5em !important;
border: 0.2em solid rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 0 0 1000em rgba(0, 0, 0, 0.7) !important;
pointer-events: none;

指针事件：无；是导致此问题的原因