Alert over Modal

Question

I'm trying to show this alert on top of the Modal but unable to get it working. Instead, it shows behind the Modal.

The html:

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

The 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;
    }

The modal css goes like this:

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

What am I missing? I want to see the alert coming on top of the Modal.

Answer 1

Here's an updated Fiddle that's working for you. http://jsfiddle.net/benxmf5y/5/

The only change I made was to add

z-index: 999999;

Answer 2

You can try putting the alert code in a div inside the modal div itself and keep it hidden and then trigger the alert when needed. If the alert is inside the modal then it will definitely come above the modal.

Answer 3

The way I got it to work was by making sure that the Alert component was above everything by being placed in the index.js file, and making sure that the Alert was placed within a Portal component.

 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;