2017-08-30 15 views
1

私は、ページ区画にスポットライトを含む不透明なオーバーレイを含む紹介ツアーを作成するためのプラグイン(intro-js)を持っています。モバイルSafari Z-インデックスが動作しない

次のCSSルールを使用して、私はクラスintrojs-showElement内の要素を他のすべての要素の上に持ってきてみます。

どのように私のデスクトップブラウザのようにCSSの要素を表示できますか?現在、私は自分のCSSに白いボックスしか表示していません。

.introjs-showElement, 
tr.introjs-showElement>td, 
tr.introjs-showElement>th { 
    z-index: 99999998 !important; 
} 

.introjs-showElement>* { 
    -webkit-transform: translateZ(1px) !important; 
} 

表示されないのdivテキストおよびトグルボタンのHTMLサンプル(すべての固定ヘッダスクロール角度角度データテーブルプラグインに存在する)

<td class="td-nopadding ng-enter-fast ng-leave"> 
         <div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1"> 
          <div class="text-input"> 
          <input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();"> 
          </div> 
          <div class="inc-dec-buttons"> 
          <button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]"> 
           <span class="glyphicon-plus"></span> 
          </button> 
          <br> 
          <button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]"> 
           <span class="glyphicon-minus"></span> 
          </button> 
          </div> 
         </div> 

        </td> 
+0

この作業が表示されるようにいくつかのHTMLを含めることができれば、あなたがしようとしていることを理解しやすくなります。しかし、 'z-index'だけでは何もしないことに注意してください。 'z-index'は配置された要素に対してのみ機能するので、最初のルールに' position:relative'を追加したいと思うかもしれません。 – cjl750

+0

編集をご覧ください – Vahe

答えて

0

これはライブラリの既知の問題です。

...数名に。

問題がstacking contextとintroJsは要素が一番上に表示させている方法である:

ライブラリーは、(例えば)体の同じスタッキングコンテキストにあるようにターゲット要素のすべての親ノードが必要です。 position: fixedは、新しいスタッキングコンテキストを作成します(transformと同様)。

introJsがターゲット要素を上に表示する方法を調整するまで、この問題は修正されません。

関連する問題