import { Modal, useNotify } from '@zeal-ui/core';
Editable Code
const ModalStyled = styled(Container)`.modal{width: 18rem;height: 20rem;@media(min-width:425px){width:25rem;height:25rem;}}`;const ModalDemo = () => {const { isOpen, onOpen, onClose } = useNotify();return (<ModalStyled type="col"><Button onClick={() => onOpen('REGULAR_MODAL')}>Regular Modal</Button><Button onClick={() => onOpen('CENTERED_MODAL')}>Centered Modal</Button><Modaltype="col"isOpen={isOpen === 'REGULAR_MODAL'}onClickAway={onClose}className="modal"><Container type="row" width="100%" rowBetween colCenter><Text type="subHeading1">Modal</Text><Button onClick={onClose}>X</Button></Container><Text>It is a long established fact that a reader will be distracted by the readablecontent of a page when looking at its layout. The point of using Lorem Ipsum isthat it has a more-or-less normal distribution of letters, as opposed to using'Content here, content here', making it look like readable English. Many desktoppublishing packages and web page editors now use Lorem Ipsum as their defaultmodel text, and a search for 'lorem ipsum' will uncover many web sites still intheir infancy. Various versions have evolved over the years, sometimes byaccident, sometimes on purpose (injected humour and the like)</Text></Modal><Modaltype="col"position="center"isOpen={isOpen === 'CENTERED_MODAL'}onClickAway={onClose}className="modal"><Container type="row" width="100%" rowBetween colCenter><Text type="subHeading1">Modal</Text><Button onClick={onClose}>X</Button></Container><Text>It is a long established fact that a reader will be distracted by the readablecontent of a page when looking at its layout. The point of using Lorem Ipsum isthat it has a more-or-less normal distribution of letters, as opposed to using'Content here, content here', making it look like readable English. Many desktoppublishing packages and web page editors now use Lorem Ipsum as their defaultmodel text, and a search for 'lorem ipsum' will uncover many web sites still intheir infancy. Various versions have evolved over the years, sometimes byaccident, sometimes on purpose (injected humour and the like)</Text></Modal></ModalStyled>);};render(<ModalDemo />);
width
Description
It is used to set the width of the modal.
Values
String with valid width.
height
Description
It is used to set the height of the modal.
Values
String with valid height.
position
Description
It is used to set the position of the modal based on the view port.
Values
center.
isOpen
Description
It is used to decide when the modal will be opened and closed.
Values
Boolean value.
onClickAway
Description
It is the function that will be called when user clicks away from the modal.
Values
Function that closes the modal.
color
Description
It is used to set the color of the modal.
Values
primary | secondary | accent | error | warning | success
To learn about customizing the components check this section of the docs.