Modal
React Bootstrap 5 Modal component
Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Note: Read the API tab to find all available options and advanced customization
Basic example
Click the button to launch the modal.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [basicModal, setBasicModal] = useState(false);
const toggleShow = () => setBasicModal(!basicModal);
return (
<>
<MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
<MDBModal show={basicModal} setShow={setBasicModal} tabIndex='-1'>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>...</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Advanced examples
Click the buttons to launch the modals.
Frame modal
Position
Side modal
Position
Central modal
Size
Modal components
Below is a static modal example (meaning its position and
display have been overridden). Included are the modal header, modal body
(required for padding), and modal footer (optional). We ask that you include
modal headers with dismiss actions whenever possible, or provide another explicit dismiss
action.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [basicModal, setBasicModal] = useState(false);
const toggleShow = () => setBasicModal(!basicModal);
return (
<>
<MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
<MDBModal show={basicModal} setShow={setBasicModal} tabIndex='-1'>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>Modal body text goes here.</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Position
To change the position of the modal add one of the following props to the MDBModalDialog
Top right:
side + position="top-right"
Top left:
side + position="top-left"
Bottom right:
side + position="bottom-right"
Bottom left:
side + position="bottom-left"
Note: If you want to change the direction of modal animation, add the prop{' '}
animationDirection, top, bottom or left to the{' '}
Modal component.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [topRightModal, setTopRightModal] = useState(false);
const toggleShow = () => setTopRightModal(!topRightModal);
return (
<>
<MDBBtn onClick={toggleShow}>Top right</MDBBtn>
<MDBModal
animationDirection='right'
show={topRightModal}
tabIndex='-1'
setShow={setTopRightModal}
>
<MDBModalDialog position='top-right' side>
<MDBModalContent>
<MDBModalHeader className='bg-info text-white'>
<MDBModalTitle>Product in the cart</MDBModalTitle>
<MDBBtn
color='none'
className='btn-close btn-close-white'
onClick={toggleShow}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<div className='row'>
<div className='col-3 text-center'>
<i className='fas fa-shopping-cart fa-4x text-info'></i>
</div>
<div className='col-9'>
<p>Do you need more time to make a purchase decision?</p>
<p>No pressure, your product will be waiting for you in the cart.</p>
</div>
</div>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='info'>Go to the cart</MDBBtn>
<MDBBtn outline color='info' onClick={toggleShow}>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Frame
To make the modal "frame-like" add frame prop to the
MDBModalDialog element. You also need to specify the direction by adding
position="bottom" or position="top" to the MDBModalDialog.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [bottomModal, setBottomModal] = useState(false);
const toggleShow = () => setBottomModal(!bottomModal);
return (
<>
<MDBBtn onClick={toggleShow}>Launch frame modal</MDBBtn>
<MDBModal
animationDirection='bottom'
show={bottomModal}
tabIndex='-1'
setShow={setBottomModal}
>
<MDBModalDialog position='bottom' frame>
<MDBModalContent>
<MDBModalBody className='py-1'>
<div className='d-flex justify-content-center align-items-center my-3'>
<p className='mb-0'>We use cookies to improve your website experience</p>
<MDBBtn color='success' size='sm' className='ms-2' onClick={toggleShow}>
Ok, thanks
</MDBBtn>
<MDBBtn size='sm' className='ms-2'>
Learn more
</MDBBtn>
</div>
</MDBModalBody>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Static backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [staticModal, setStaticModal] = useState(false);
const toggleShow = () => setStaticModal(!staticModal);
return (
<>
<MDBBtn onClick={toggleShow}>Launch static backdrop modal</MDBBtn>
<MDBModal staticBackdrop tabIndex='-1' show={staticModal} setShow={setStaticModal}>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>...</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Understood</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
You can also create a scrollable modal that allows scroll the modal body by adding
scrollable to MDBModalDialog.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [scrollableModal, setScrollableModal] = useState(false);
return (
<>
<MDBBtn onClick={() => setScrollableModal(!scrollableModal)}>LAUNCH DEMO MODAL</MDBBtn>
<MDBModal show={scrollableModal} setShow={setScrollableModal} tabIndex='-1'>
<MDBModalDialog scrollable>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn
className='btn-close'
color='none'
onClick={() => setScrollableModal(!scrollableModal)}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={() => setScrollableModal(!setScrollableModal)}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Vertically centered
Add centered to MDBModalDialog to vertically center the modal.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [centredModal, setCentredModal] = useState(false);
const toggleShow = () => setCentredModal(!centredModal);
return (
<>
<MDBBtn onClick={toggleShow}>Vertically centered modal</MDBBtn>
<MDBModal tabIndex='-1' show={centredModal} setShow={setCentredModal}>
<MDBModalDialog centered>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Tooltips and popovers
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
import React, { useState } from 'react';
import {
MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
MDBPopover,
MDBPopoverHeader,
MDBPopoverBody,
MDBTooltip
} from 'mdb-react-ui-kit';
export default function App() {
const [popoverModal, setPopoverModal] = useState(false);
const toggleShow = () => setPopoverModal(!popoverModal);
return (
<>
<MDBBtn onClick={toggleShow}>Launch demo modal</MDBBtn>
<MDBModal tabIndex='-1' show={popoverModal} setShow={setPopoverModal}>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<h5>Popover in a modal</h5>
<p>
This
<MDBPopover isOpen={popoverModal} color='secondary' btnChildren='button' placement='right'>
<MDBPopoverHeader>Popover title</MDBPopoverHeader>
<MDBPopoverBody>Popover body content is set in this attribute.</MDBPopoverBody>
</MDBPopover>
triggers a popover on click.
</p>
<hr />
<h5>Tooltips in a modal</h5>
<p>
<MDBTooltip tag='a' wrapperProps={{ href: '#!' }} title='Tooltip'>
This link
</MDBTooltip>{' '}
and{' '}
<MDBTooltip tag='a' wrapperProps={{ href: '#!' }} title='Tooltip'>
that link
</MDBTooltip>{' '}
have tooltips on hover.
</p>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Using the grid
Utilize the Bootstrap grid system within a modal by nesting
.container-fluid within the .modal-body. Then, use the normal grid
system classes as you would anywhere else.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [gridModal, setGridModal] = useState(false);
const toggleShow = () => setGridModal(!gridModal);
return (
<>
<MDBBtn onClick={toggleShow}>Launch demo modal</MDBBtn>
<MDBModal tabIndex='-1' show={gridModal} setShow={setGridModal}>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Grids in modals</MDBModalTitle>
<MDBBtn
type='button'
className='btn-close'
color='none'
onClick={toggleShow}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<div className='container-fluid bd-example-row'>
<div className='row'>
<div className='col-md-4 col-example'>.col-md-4</div>
<div className='col-md-4 ms-auto col-example'>.col-md-4 .ms-auto</div>
</div>
<div className='row'>
<div className='col-md-3 ms-auto col-example'>.col-md-3 .ms-auto</div>
<div className='col-md-2 ms-auto col-example'>.col-md-2 .ms-auto</div>
</div>
<div className='row'>
<div className='col-md-6 ms-auto col-example'>.col-md-6 .ms-auto</div>
</div>
<div className='row'>
<div className='col-sm-9 col-example'>
Level 1: .col-sm-9
<div className='row'>
<div className='col-8 col-sm-6 col-example'>Level 2: .col-8 .col-sm-6</div>
<div className='col-4 col-sm-6 col-example'>Level 2: .col-4 .col-sm-6</div>
</div>
</div>
</div>
</div>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
event.relatedTarget and
HTML data-mdb-* attributes
to vary the contents of the modal depending on which button was clicked.
Below is a live demo followed by example HTML and JavaScript. For more information, read the
modal API/events doc for details on relatedTarget.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
MDBInput,
} from 'mdb-react-ui-kit';
export default function App() {
const [varyingState, setVaryingState] = useState('');
const [varyingModal, setVaryingModal] = useState(false);
const [varyingRecipient, setVaryingRecipient] = useState('');
const [varyingMessage, setVaryingMessage] = useState('');
const onChangeRecipient = (event: any) => {
setVaryingRecipient(event.target.value);
};
const onChangeMessage = (event: any) => {
setVaryingMessage(event.target.value);
};
return (
<>
<MDBBtn
onClick={() => {
setVaryingState('@mdo');
setVaryingModal(!varyingModal);
setVaryingRecipient('@mdo');
}}
>
Open modal for @mdo
</MDBBtn>
<MDBBtn
onClick={() => {
setVaryingState('@fat');
setVaryingModal(!varyingModal);
setVaryingRecipient('@fat');
}}
>
Open modal for @fat
</MDBBtn>
<MDBBtn
onClick={() => {
setVaryingState('@getbootstrap');
setVaryingModal(!varyingModal);
setVaryingRecipient('@getbootstrap');
}}
>
Open modal for @getbootstrap
</MDBBtn>
<MDBModal show={varyingModal} setShow={setVaryingModal} tabIndex='-1'>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>New message to {varyingState}</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={() => setVaryingModal(!varyingModal)}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<form>
<div className='mb-3'>
{varyingModal && (
<MDBInput
value={varyingRecipient}
onChange={onChangeRecipient}
labelClass='col-form-label'
label='Recipient:'
/>
)}
</div>
<div className='mb-3'>
{varyingModal && (
<MDBInput
value={varyingMessage}
onChange={onChangeMessage}
textarea
labelClass='col-form-label'
label='Message:'
/>
)}
</div>
</form>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={() => setVaryingModal(!varyingModal)}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Toggle between modals
Toggle between multiple modals with some clever placement of the
data-mdb-target and data-mdb-toggle attributes. For example, you
could toggle a password reset modal from within an already open sign in modal.
Please note multiple modals cannot be open at the same time—this method
simply toggles between two separate modals.
Below is a live demo followed by example HTML and JavaScript. For more information, read the
modal API/events doc for details on relatedTarget.
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [toggleOneModal, setToggleOneModal] = useState(false);
const [toggleTwoModal, setToggleTwoModal] = useState(false);
return (
<>
<MDBBtn onClick={() => setToggleOneModal(!toggleOneModal)}>OPEN FIRST MODAL</MDBBtn>
<MDBModal show={toggleOneModal} setShow={setToggleOneModal} tabIndex='-1'>
<MDBModalDialog centered>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal 1</MDBModalTitle>
<MDBBtn
className='btn-close'
color='none'
onClick={() => setToggleOneModal(!toggleOneModal)}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>Show a second modal and hide this one with the button below.</MDBModalBody>
<MDBModalFooter>
<MDBBtn
onClick={() => {
setToggleOneModal(!toggleOneModal);
setTimeout(() => {
setToggleTwoModal(!toggleTwoModal);
}, 400);
}}
>
Open second modal
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
<MDBModal show={toggleTwoModal} setShow={setToggleTwoModal} tabIndex='-1'>
<MDBModalDialog centered>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal 2</MDBModalTitle>
<MDBBtn
className='btn-close'
color='none'
onClick={() => setToggleTwoModal(!toggleTwoModal)}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>Hide this modal and show the first with the button below.</MDBModalBody>
<MDBModalFooter>
<MDBBtn
onClick={() => {
setToggleTwoModal(!toggleTwoModal);
setTimeout(() => {
setToggleOneModal(!toggleOneModal);
}, 400);
}}
>
Back to first
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Optional sizes
Modals have three optional sizes, available via modifier props to be placed on a MDBModalDialog.
These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
| Size | Prop | Modal max-width |
|---|---|---|
| Small | size="sm" |
300px |
| Default | None | 500px |
| Large | size="lg" |
800px |
| Extra large | size="xl" |
1140px |
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody
} from 'mdb-react-ui-kit';
export default function App() {
const [optSmModal, setOptSmModal] = useState(false);
const toggleShow = () => setOptSmModal(!optSmModal);
return (
<>
<MDBBtn onClick={toggleShow}>Small modal</MDBBtn>
<MDBModal show={optSmModal} tabIndex='-1' setShow={setOptSmModal}>
<MDBModalDialog size='sm'>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Small modal</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>...</MDBModalBody>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via
modifier props that are placed on a MDBModalDialog.
| Prop | Availability |
|---|---|
size="fullscreen" |
Always |
size="fullscreen-sm-down" |
Below 576px |
size="fullscreen-md-down" |
Below 768px |
size="fullscreen-lg-down" |
Below 992px |
size="fullscreen-xl-down" |
Below 1200px |
size="fullscreen-xxl-down" |
Below 1400px |
import React, { useState } from 'react';
import { MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [fullscreenXlModal, setFullscreenXlModal] = useState(false);
const toggleShow = () => setFullscreenXlModal(!fullscreenXlModal);
return (
<>
<MDBBtn onClick={toggleShow}>Full screen below xl</MDBBtn>
<MDBModal tabIndex='-1' show={fullscreenXlModal} setShow={setFullscreenXlModal}>
<MDBModalDialog size='fullscreen-xl-down'>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Full screen below xl</MDBModalTitle>
<MDBBtn
type='button'
className='btn-close'
color='none'
onClick={toggleShow}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>...</MDBModalBody>
<MDBModalFooter>
<MDBBtn type='button' color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Modal - API
Import
import {
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
Properties
MDBModal
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBModal element |
<MDBModal tag="section" />
|
className
|
String | '' |
Add custom class to MDBModal |
<MDBModal className="class" />
|
animationDirection
|
String | '' |
Defines animation direction of the modal |
<MDBModal animationDirection="top" />
|
backdrop
|
Boolean | true |
Sets a backrop for modal |
<MDBModal backdrop={false} />
|
closeOnEsc
|
Boolean | true |
Allows to close modal on Escape keydown |
<MDBModal closeOnEsc={false} />
|
tabIndex
|
String | '' |
Defines a tabindex attribute of the modal |
<MDBModal tabIndex="-1" />
|
show
|
Boolean | false |
Sets visibility of the modal |
<MDBModal show={true} />
|
staticBackdrop
|
Boolean | false |
Creates static backdrop for the modal |
<MDBModal staticBackdrop />
|
MDBModalDialog
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBModalDialog element |
<MDBModalDialog tag="section" />
|
className
|
String | '' |
Add custom class to MDBModalDialog |
<MDBModalDialog className="class" />
|
centered
|
boolean | false |
Vertically centeres modal dialog window |
<MDBModalDialog centered />
|
MDBModalContent
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBModalContent element |
<MDBModalContent tag="section" />
|
className
|
String | '' |
Add custom class to MDBModalContent |
<MDBModalContent className="class" />
|
MDBModalHeader
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBModalHeader element |
<MDBModalHeader tag="section" />
|
className
|
String | '' |
Add custom class to MDBModalHeader |
<MDBModalHeader className="class" />
|
MDBModalTitle
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBModalTitle element |
<MDBModalTitle tag="h3" />
|
className
|
String | '' |
Add custom class to MDBModalTitle |
<MDBModalTitle className="class" />
|
MDBModalBody
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBModalBody element |
<MDBModalBody tag="section" />
|
className
|
String | '' |
Add custom class to MDBModalBody |
<MDBModalBody className="class" />
|