模态警报

Question

我试图在模式顶部显示此警报，但无法使其正常工作。 相反，它显示在模态后面。

html：

    <alert class="alertmessage" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
            <small>{{alert.msg}}</small>
    </alert>

CSS：

    .alertmessage {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 300px;
        margin-left: -150px;
        margin-top: -100px;
        text-align: center;
        z-index: 99999 !important;
        outline: 9999px solid rgba(0,0,0,0.8);
        border-radius: 0px;
    }

模式 css 是这样的：

    element.style {
        z-index: 1040;
        display: block;
    }

我错过了什么？ 我想看到警报出现在模式顶部。

Answer 1

这是为您工作的更新的小提琴。 http://jsfiddle.net/benxmf5y/5/

我所做的唯一更改是添加

z-index: 999999;

Answer 2

您可以尝试将警报代码放在模式div本身的div中，并使其保持隐藏状态，然后在需要时触发警报。 如果警报位于模式内部，则它肯定会高于模式。

Answer 3

我让它工作的方法是通过将 Alert 组件放置在 index.js 文件中来确保 Alert 组件高于一切，并确保将 Alert 放置在 Portal 组件中。

 import React from "react"; import Alert from "@mui/material/Alert"; import { Portal } from "@mui/material"; const portalStyle = { display: "grid", gridAutoFlow: "row", alignItems: "start", alignContent: "start", justifyContent: "end", justifyItems: "end", gap: "10px", width: "100%", height: "100%", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", p: 4, borderRadius: "2px", outline: "none", pointerEvents: "none", userSelect: "none", }; const alertStyle = { width: "100%", maxWidth: "650px", pointerEvents: "none", userSelect: "none", }; const AlertModal = () => { return ( <Portal> <div style={portalStyle} > <Alert sx={alertStyle} severity="info" variant="filled" > {alert.message} </Alert> </div> </Portal> ); }; export default AlertModal;