jQueryのプラグインの競合：移動Y

Question

イムプラグインのコードは、このjsfiddleに含まれているleanModal

を呼び出す軽量jQueryプラグインを使用して：jsfiddle、例えば、 https://jsfiddle.net/meqtu354/2/

すべてのプラグインですん、click to show popupをクリックすると、ポップアップが表示され、残りのドキュメントは巨大な暗い透明なdivで覆われます。

しかし、私は追加何らかの理由：あなたはclick to show popupをクリックしたときにtransform: translateY私のCSSへの

https://jsfiddle.net/meqtu354/3/（CSSをチェックし、2つのセレクタを追加しました）

今、オーバーレイ（濃い透明divが）ポップアップをカバーあまりにも。

私は今、半時間のためにこれを読んでいますが、あなたは、ST-スクロールクラスの外でポップアップdiv要素を配置する必要がある理由

Answer 1

まだ把握カント：

<div id="popup">POPUP</div> 

<div class="st-scroll"> 

    <section></section> 
    <script></script> 
    <section></section> 

</div> 

私はそれを試してみましたあなたのフィドルとそれは働いた。 3d transformプロパティを適用すると、divを、レイヤーなしの1つのオブジェクトとしてマージすると思います。

Answer 2

隣接するセレクタを使用していますが、＃st-control-1と.st-scrollの間にある<a href="">は選択していません。 CSSの流れをどのように壊しているのか正しい隣接セレクタパスがある：

#st-control-1:checked ~ #st-panel-1 .st-scroll { transform: translateY(0%); -ms-transform: translate(0%); -webkit-transform: translate(0%); }

また、特性のこれらのタイプのためにあなたのCSSのベンダープレ修正プログラムを使用します。お役に立てれば。