jquery 插件与 transform: translateY 冲突

jquery plugin conflict with transform: translateY

本文关键字：translateY 冲突 transform 插件 jquery      更新时间：2023-09-26

Im 使用轻量级 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）也会覆盖弹出窗口。

我已经读了半个小时了，但仍然想不通为什么

你需要把弹出的div放在st-scroll类之外：

<div id="popup">POPUP</div>
<div class="st-scroll">
    <section></section>
    <script></script>
    <section></section>
</div>

我在你的小提琴上试过了，它奏效了。当您应用 3d 变换属性时，我认为它会合并div，就好像它是一个没有图层的对象一样。

您使用相邻的选择器，但没有选择 #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 中使用供应商前缀。 希望这有帮助。

相关文章：