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.

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

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.

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.

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

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

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.

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