CODEWITHSUNDEEP
cssreactjsmodal-dialogantd
JacopoStanchi
JacopoStanchi

Reputation: 2146

Except Header in Modal mask

When I make a modal using Ant Design, it makes all the background, including the header, grey like this:

image1

But I want something like this:

image2

Here is a snippet and here is the simplified code:

import { Layout, Modal } from "antd";
const { Header } = Layout;

class App = () => (
  <Layout>
    <Header>My header</Header>
    <Modal visible={true}>My modal<Modal>
  </Layout>
);

How should I do?

Thank you for your help.

Upvotes: 0

Views: 2652

Answers (2)

Ankari
Ankari

Reputation: 619

As you can see when viewing the modals code, the ant-modal-wrap (dark shadow effect) has a z-index set to 1000.

This means that giving the header a larger z-index would make it appear in front of the ant-modal-wrap.

Try this:

<Header style={{backgroundColor: "red", color: "black", zIndex:1001}}>My header</Header>

Of course according to the documentation, you can always modify the z-index of the modal (default value is 1000 as mentioned above) using the zIndex property. You can then adjust both to your liking, the important thing being that the headers z-index should be larger, since you want that to appear on top.

Upvotes: 2

onyx
onyx

Reputation: 1618

From the API documentation

maskStyle Style for modal's mask element.

You can use the maskStyle property to adjust the background, e.g. 

<Modal maskStyle={{backgroundColor: "inherit"}} visible={true}>
   My modal
</Modal>

If you however want to keep the background and not overlay the header:

<Modal maskStyle={{top: "90px"}} visible={true}>

Upvotes: 1

Related Questions