Question

我有一个自制的模式窗口，显示在实际窗口的上方或上方。要到达该按钮，您必须向下滚动页面。问题是模态显示在页面顶部（而不是窗口），很难描述，因此这里有一个测试链接来查看行为：

https://www.voyagersopris.com/testing/modal-testing#modal

点击“ OPEN MODAL”按钮。

定义位置的CSS是：

    .form-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

单击“显示模式”按钮时，JavaScript会将显示设置为block。

所以，我的问题是如何使模态显示在窗口中而不是窗口之外的页面顶部？ FYI Bootstrap的“模态”窗口显示相同的行为，并且出现在叠加层后面的其他问题。

感谢您的输入！

Answer 1

默认情况下，position:fixed相对于当前viewport（这是窗口对象的当前可见部分）的位置。

但是，在元素上使用3d变换会将它们设置为所有子对象的当前视口。

就您而言，

-webkit-transform: translate3d(0,0,0);

应用于.slide-menu-wrapper的

...会将其设置为其所有子项的视口。这导致模态相对于.slide-menu-wrapper定位。

从-webkit-transform: translate3d(0,0,0);中删除.slide-menu-wrapper可解决此问题（或用-webkit-transform: none覆盖）。

您可能已应用该样式来防止某些动画闪烁。您需要更详细地说明该规则，并将其应用于问题动画元素的更直接的父级。

单独说来，.slide-menu-wrapper听起来并不像应该包装整个页面的类，对吗？

为什么我的自定义模式窗口在窗口的“外部/上方”？

1 个答案: