On this page

Angular Modal Component

Angular Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize Angular CoreUI Modals easily. Multiple examples and tutorial.

Examples

Modal components

Below is a static modal example (meaning itsposition anddisplay have been overridden). Included are the modal header, modal body (required forpadding), 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 abackdrop tostatic, 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 addingscrollable prop.

Vertically centered

Addalignment="center toc-modal for vertically centered modal.

Centered scrollable

Tooltips and popovers

cTooltips andcPopovers 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 withcModalToggle 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 ac-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 propertyfullscreen.

`fullscreen` value	Availability
`true`	Always
`sm`	Below`576px`
`md`	Below`768px`
`lg`	Below`992px`
`xl`	Below`1200px`
`xxl`	Below`1400px`

API reference

Modal Module

import { ModalModule } from '@coreui/angular';@NgModule({   imports: [ModalModule,]})export class AppModule() { }

c-modal

component

Inputs

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

Movatterモバイル変換

Angular Modal Component

Examples

Modal components

Live demo

Static backdrop

Scrolling long content

Scrollable

Vertically centered

Tooltips and popovers

Toggle between modals

Optional sizes

Fullscreen Modal

API reference

Modal Module

c-modal

Inputs

Outputs

c-modal-body

c-modal-footer

c-modal-header

cModalTittle

cModalToggle

Inputs