Angular Modal with Bootstrap - free examples & tutorial
Angular Bootstrap 5 Modal component
Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Note: Read the API tab to find all available options and advanced customization
Basic example
Click the button to launch the modal.
You can create modals dynamically from any component using a built-in service. To achieve this, follow these steps:
1. Create a new component with Angular CLI and add some HTML code to the template.
ng generate component modal
2. Inject MdbModalService to the component from which you want to open the
modal and use the open method.
Inject and receive data
You can inject data to the modal by passing it to the data parameter in the modal
options.
Here is an example showing how to use injected data in the modal component:
Receive data from the modal
You can receive data from the modal to use it in other components:
Here is an example showing how to use data received from modal in other components
Advanced examples
Click the buttons to launch the modals.
Frame modal
Position
Side modal
Position
Central modal
Size
How it works
Before getting started with MDB modal component, be sure to read the following as our menu options have recently changed.
-
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in
the document and remove scroll from the
<body>so that modal content scrolls instead. - Clicking on the modal “backdrop” will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Position
To change the position of the modal add one of the following classes to the
modalClass option.
Top right: .modal-side +
.modal-top-right
Top left: .modal-side +
.modal-top-left
Bottom right: .modal-side +
.modal-bottom-right
Bottom left: .modal-side +
.modal-bottom-right
Note: If you want to change the direction of modal animation, add the class
.top, .right, bottom or .left to the
containerClass option.
Frame
To make the modal "frame-like" add .frame class and .top or
.bottom class to containerClass option. Add .modal-frame class
and .modal-top or .modal-bottom class to modalClass
option.
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.
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to modalClass option.
Vertically centered
Add .modal-dialog-centered to modalClass option to vertically center
the modal.
Tooltips and popovers
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
Using the grid
Utilize the Bootstrap grid system within a modal by nesting
.container-fluid within the .modal-body. Then, use the normal grid
system classes as you would anywhere else.
Change animation
The $modal-fade-transform variable determines the transform state of
.modal-dialog before the modal fade-in animation, the
$modal-show-transform variable determines the transform of
.modal-dialog at the end of the modal fade-in animation.
If you want for example a zoom-in animation, you can set
$modal-fade-transform: scale(.8).
Remove animation
For modals that simply appear rather than fade into view, set the
animation option to false.
Optional sizes
Modals have three optional sizes, available via modifier classes that needs to be added to
modalClass option. These sizes kick in at certain breakpoints to avoid horizontal
scrollbars on narrower viewports.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1140px |
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via
modifier classes that are passed to the modalClass option.
| Class | Availability |
|---|---|
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
Below 576px |
.modal-fullscreen-md-down |
Below 768px |
.modal-fullscreen-lg-down |
Below 992px |
.modal-fullscreen-xl-down |
Below 1200px |
.modal-fullscreen-xxl-down |
Below 1400px |
Non-invasive Modal
This type of modal does not block any interaction on the page. Simply add nonInvasive option.