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

You need to put the popup div outside of the st-scroll class:

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

<div class="st-scroll">

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

</div>

I tried it in your fiddle and it worked. When you apply a 3d transform property, I think it merges the div as if it is one object without layers.

Answer 2

you are using adjacent selectors, but not selecting the <a href=""> you have between #st-control-1 and .st-scroll. that some how is breaking the flow of the CSS. The correct adjacent selector path is:

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

Also, use the vendor pre-fix in your css for these type of properties. hope this helps.

jquery插件与transform：translateY冲突

2 个答案: