javascript - jquery 插件与转换冲突 : translateY

Question

我正在使用一个轻量级的 jQuery 插件调用 leanModal

该插件的代码包含在这个 jsfiddle 中: https://jsfiddle.net/meqtu354/2/

所有插件所做的就是，例如在 jsfiddle 中，当您单击 click to show popup 时，弹出窗口会出现，文档的其余部分会被一个巨大的深色透明 div 覆盖。

但出于某种原因，当我添加:transform: translateY 到我的 css

https://jsfiddle.net/meqtu354/3/ (检查 css，添加了两个选择器)

现在，当您点击 click to show popup 时，叠加层(深色透明 div)也会覆盖弹出窗口。

我已经读了半个小时了，但还是想不通

Answer 1

您需要将弹出式 div 放在 st-scroll 类之外:

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

<div class="st-scroll">

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

</div>

我在你的 fiddle 里试过了，它成功了。当您应用 3d 变换属性时，我认为它合并了 div，就好像它是一个没有图层的对象。