CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-modal
user3362364
user3362364

Reputation: 477

Alert over Modal

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.

Upvotes: 3

Views: 10269

Answers (3)

user14849955
user14849955

Reputation:

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;

Upvotes: 0

Haensz
Haensz

Reputation: 127

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;

Upvotes: 5

pyron_orion
pyron_orion

Reputation: 635

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.

Upvotes: 2

Related Questions