intro.js移動底層元素的左側和彼此重疊

Question

我試圖在一個流星項目安裝intro.js：

我使用自舉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> 

Answer 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.jshttps://github.com/Dozyatom/guide.js

Answer 2

我們看到一個類似的問題，一旦一個元素被introJS定位，它會添加一個名爲的類導致頭寸稍微轉移。

我們通過覆蓋在CSS

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

Answer 3

規則也許你可以前introJs開始使用setTimeout功能解決了這個問題。下面的代碼適用於我

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