Angular Modal

On this page

## Examples ### 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.

### 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.

### Static backdrop If you set a `backdrop` to `static`, 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.

### 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.

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

### Vertically centered Add `alignment="center` to `c-modal` for vertically centered modal.

Centered scrollable

### 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.

### Toggle between modals Toggle between multiple modals with `cModalToggle` values juggling. __Please note multiple modals cannot be opened at the same time__ — this method simply toggles between two separate modals.

### Optional sizes Modals have three optional sizes, available via modifier props be placed on a `c-modal`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

| Size | Property value | Modal max-width | | ---- | ----------- | ---- | | Small | `sm` | `300px` | | Default | _none_ | `500px` | | Large | `lg` | `800px` | | Extra Large | `xl` | `1140px` |

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

| `fullscreen` value | Availability | | ---- | ----------- | | `true` | _Always_ | | `sm` | _Below_ `576px` | | `md` | _Below_ `768px` | | `lg` | _Below_ `992px` | | `xl` | _Below_ `1200px` | | `xxl` | _Below_ `1400px` |

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `alignment` | Align the modal in the center or top of the screen. | `top` \| `center` | _top_ | | `backdrop` | Apply a backdrop on body while modal is open. | `boolean` \| `static` | _true_ | | `fullscreen` | Set modal to cover the entire user viewport. | `boolean` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` |_undefined_| | `id` | Html id attr, required for programmatic modal visibility change. | `string` | **required** | | `keyboard` | Closes the modal when escape key is pressed. | `boolean` |_true_| | `size` | Size the component small, large, or extra large. | `sm` \| `lg` \| `xl` |_undefined_| | `transition` | Remove animation to create modal that simply appear rather than fade in to view. | `boolean` |_true_| | `scrollable` | Create a scrollable modal that allows scrolling the modal body. | `boolean` |_false_| | `visible` | Toggle the visibility of modal component. | `boolean` |_undefined_| | `role` | Html role for modal | `string` |_dialog_| | `aria-modal` | Set aria-modal html attr for modal. | `string` |_true_|

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `visibleChange` | Event emitted on `visible` change. | `boolean` |

### c-modal-body _component_ ### c-modal-footer _component_ ### c-modal-header _component_ ### cModalTittle _directive_ ### cModalToggle _directive_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `cModalToggle` | Html element id attr of modal to dismiss. | `string` | **required** |