在全屏组件中，Material Ui 模态不起作用

Question

我正在使用react-full-screen节点包来制作全屏组件，但是模态框、弹出框和抽屉不起作用。

您能帮我在全屏组件中制作一个工作模式吗？

Answer 1

你确定这不起作用吗？也许你的模态显示得很好，但在全屏组件后面（你是否使用 devtool 的元素检查器检查 html / css 以查看你的模态是否在这里？）。 您可能需要丰富模态的 css，使其在全屏组件之前可见，模态样式上的

z-index: 2

可能会有所帮助？

Answer 2

要使用 Material-UI 将模态集成到全屏组件中，您可以利用 Backdrop 组件和 Fade 来实现过渡效果。这是提供的代码示例：

<Backdrop
    aria-labelledby="transition-modal-title"
    aria-describedby="transition-modal-description"
    open={true} // This controls whether the backdrop is open or not
    slots={{ backdrop: Backdrop }} // Customizing the slots to use Backdrop
    slotProps={{
        backdrop: {
            timeout: 500, // Timeout for the backdrop transition
        },
    }}
    sx={{ zIndex: 9999 }} // Customizing the styles using sx prop
>
    <Fade in={"open"}> // Applying a fade transition, "open" here should be a boolean indicating whether to apply the transition or not
        <Box
            className="FadeModal"
            sx={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: 400,
                bgcolor: "background.paper",
                border: "none",
                borderRadius: "8px",
                boxShadow: 24,
            }}
        >
            {/* Modal content */}
            {/* Grid and Typography components for the title and description */}
            {/* Button to close the modal */}
        </Box>
    </Fade>
</Backdrop>

您可以修改此代码 仅背景起作用而模态内容在全屏模式下无法正确显示的原因可能是由于元素的堆叠上下文和位置。将背景组件与模态一起使用时，必须确保模态内容相对于背景和视口正确定位。

背景将作为新的自定义模式在所有渲染位置上方打开