React Modal

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.

React Modal Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

React Modal Static backdrop

If you don’t provide an onDimsiss handler to the Modal component, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.

React Modal Scrolling long content

If your modal is too long for user’s viewport, it scrolls the page by itself.

You can also create a scrollable modal that allows scroll the modal body by adding scrollable prop.

React Modal Vertically centered

Add alignment="center" to <CModal> to vertically center the modal.

React Modal Tooltips and popovers

<CTooltips> and <CPopovers> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

React Modal Optional sizes

Modals have three optional sizes, available via modifier classes to be placed on a <CModal>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

SizeProperty sizeModal max-width
Small'sm'300px
DefaultNone500px
Large'lg'800px
Extra large'xl'1140px
React Modal Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via property fullscreen.

Property fullscreenAvailability
trueAlways
'sm'Below 576px
'md'Below 768px
'lg'Below 992px
'xl'Below 1200px
'xxl'Below 1400px