弹出组件呈现但位于页面外

Question

我使用 Tailwindcss 创建了一个弹出元素。在功能方面，弹出窗口呈现并被完全删除，但问题是弹出组件的属性设置为 h-screen（高度：100%；），如果我向下滚动，弹出窗口看起来会消失。

为了功能，我在正文中添加了一个 class 来防止滚动，但组件仍然呈现得很奇怪。

Image for Example

弹出组件代码：

interface OrderSummaryProps {
    renderOrderSummary: () => void;
    OrderSummaryPopupState: boolean;
}

// { cartList, renderPopUp }: OrderSummaryProps
function OrderSummary({ renderOrderSummary, OrderSummaryPopupState }: OrderSummaryProps) {
    const getBody = document.querySelector('body')

    if (OrderSummaryPopupState) getBody?.classList.add('overflow-hidden')
    else getBody?.classList.remove('overflow-hidden')

    return (
        <>
            <div className='absolute top-0 bg-black z-10 w-full backdrop-filter backdrop-blur-sm bg-opacity-25 flex justify-center items-center' style={{ height: '100%' }}>
                <div className='bg-white shadow-xl w-max h-max border border-neutral-200 rounded-xl flex items-center justify-between flex-col px-20 py-10'>
                    <div className='flex flex-col justify-center my-10'>
                        <button onClick={() => renderOrderSummary()} className='rounded-full py-2 px-6 border-2 border-red-200 bg-red-500 font-bold text-white'>סגור חלון</button>
                    </div>
                </div>
            </div>
        </>
    );
}

export default OrderSummary;

Answer 1

该挑战的答案是明智地使用 'fixed' 和 'inset-0' 顺风属性。这已将弹出窗口固定在屏幕上，无论您位于页面的哪个位置。

给像我这样的新手的提示 - front-end 的 Codepen 可以成为你最好的朋友。

Check out also Tailwind CSS Docs

弹出组件呈现但位于页面外

Popup component renders but positioned off-page

reactjs

popup

tailwind-css