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