ant-design/components/modal/demo/nested.tsx
kiner-tang(文辉) dde36511e6
feat: Modal & Select support z-index context to manage z-index (#45346)
* feat: z-index manager

* feat: z-index manager

* feat: update snap

* chore: update site-limit

* feat: optimize code

* feat: optimize code

* feat: add test case

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code
2023-10-19 02:03:20 -05:00

90 lines
2.0 KiB
TypeScript

import React, { useState } from 'react';
import { Modal, Select, Switch } from 'antd';
const options = [
{
label: 'Option 1',
value: '1',
},
{
label: 'Option 2',
value: '2',
},
];
const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
return (
<>
<Switch
style={{ position: 'relative', zIndex: 4000 }}
checkedChildren="Open"
unCheckedChildren="Close"
onChange={(open) => setIsModalOpen(open)}
/>
<Modal
title="Basic Modal"
open={isModalOpen}
footer={null}
destroyOnClose
onCancel={() => setIsModalOpen(false)}
maskClosable={false}
closable={false}
styles={{
content: {
marginBlockStart: 100,
},
}}
>
<Select open value="1" options={options} />
<Modal
title="Nested Modal"
open={isModalOpen}
footer={null}
destroyOnClose
mask={false}
onCancel={() => setIsModalOpen(false)}
maskClosable={false}
closable={false}
styles={{
content: {
marginBlockStart: 250,
},
body: {
display: 'flex',
justifyContent: 'center',
},
}}
>
<Select open value="1" options={options} />
<Modal
title="Nested Modal"
open={isModalOpen}
footer={null}
destroyOnClose
mask={false}
maskClosable={false}
onCancel={() => setIsModalOpen(false)}
closable={false}
styles={{
content: {
marginBlockStart: 400,
},
body: {
display: 'flex',
justifyContent: 'flex-end',
},
}}
>
<Select open value="1" options={options} />
</Modal>
</Modal>
</Modal>
</>
);
};
export default App;