Modal

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

        
            
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              aria-label="Close"
              (click)="modalRef.close()"
            ></button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="modalRef.close()">
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

            @Component({
              selector: 'app-modal',
              templateUrl: './modal.component.html',
            })
            export class ModalComponent {
              constructor(public modalRef: MdbModalRef<ModalComponent>) {}
            }

2. Inject MdbModalService to the component from which you want to open the modal and use the open method. 

        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent)
            }

          }

Inject and receive data

You can inject data to the modal by passing it to the data parameter in the modal options. 

        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent, {
                data: { title: 'Custom title' },
              });
            }
          }

Here is an example showing how to use injected data in the modal component:

        
            
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
            <button
              type="button"
              class="btn-close"
              aria-label="Close"
              (click)="modalRef.close()"
            ></button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="modalRef.close()">
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

          @Component(
            { selector: 'app-modal',
            templateUrl: './modal.component.html',
          })
          export class ModalComponent {
            title: string | null = null;

            constructor(public modalRef: MdbModalRef<ModalComponent>) {}
          }

Receive data from the modal

You can receive data from the modal to use it in other components:

        
            
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" (click)="close()">
                Close
              </button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

          @Component(
            { selector: 'app-modal',
            templateUrl: './modal.component.html',
          })
          export class ModalComponent {
            constructor(public modalRef: MdbModalRef<ModalComponent>) {}

            close(): void {
              const closeMessage = 'Modal closed';
              this.modalRef.close(closeMessage)
            }
          }

Here is an example showing how to use data received from modal in other components

        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component(
            { selector: 'create-dynamic-modal',
            templateUrl: './create-dynamic-modal.component.html',
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent);
              this.modalRef.onClose.subscribe((message: any) => {
                console.log(message);
              });
            }
          }

Advanced examples

Click the buttons to launch the modals.

Frame modal

MDB graphics

Position


Side modal

MDB graphics

Position




Central modal

MDB graphics

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. 

        
            
              <button class="btn btn-primary" (click)="openModal()">Open modal</button>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { ModalComponent } from 'your-path-to-modal-component';
              import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                modalRef: MdbModalRef<ModalComponent> | null = null;

                constructor(private modalService: MdbModalService) {}

                openModal() {
                  this.modalRef = this.modalService.open(ModalComponent, {
                    containerClass: 'right',
                    modalClass: 'modal-side modal-top-right'
                  })
                }
              }

Frame

To make the modal "frame-like" add .modal-frame class to the modalClass option. You also need to specify the direction by adding .modal-bottom or .modal-top to the modalClass. 

        
            
              <button class="btn btn-primary" (click)="openModal()">Open modal</button>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { ModalComponent } from 'your-path-to-modal-component';
              import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                modalRef: MdbModalRef<ModalComponent> | null = null;

                constructor(private modalService: MdbModalService) {}

                openModal() {
                  this.modalRef = this.modalService.open(ModalComponent, {
                    modalClass: 'modal-frame modal-top'
                  })
                }
              }

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. 

        
            
            <button class="btn btn-primary" (click)="openModal()">Open modal</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { ModalComponent } from 'your-path-to-modal-component';
            import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              import { Component } from '@angular/core';
              import { ModalComponent } from 'your-path-to-modal-component';
              import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                modalRef: MdbModalRef<ModalComponent> | null = null;

                constructor(private modalService: MdbModalService) {}

                openModal() {
                  this.modalRef = this.modalService.open(ModalComponent, {
                    modalClass: 'modal-dialog-scrollable'
                  })
                }
              }

Vertically centered

Add .modal-dialog-centered to modalClass option to vertically center the modal. 

        
            
            <button class="btn btn-primary" (click)="openModal()">Open modal</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { ModalComponent } from 'your-path-to-modal-component';
            import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              import { Component } from '@angular/core';
              import { ModalComponent } from 'your-path-to-modal-component';
              import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss'],
              })
              export class AppComponent {
                modalRef: MdbModalRef<ModalComponent> | null = null;

                constructor(private modalService: MdbModalService) {}

                openModal() {
                  this.modalRef = this.modalService.open(ModalComponent, {
                    modalClass: 'modal-dialog-centered'
                  })
                }
              }

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. 

        
            
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              (click)="modalRef.close()"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <h5>Popover in a modal</h5>
            <p>
              This
              <a
                role="button"
                class="btn btn-secondary popover-test"
                mdbPopover="Popover body content is set in this attribute."
                mdbPopoverTitle="Popover title"
                >button</a
              >
              triggers a popover on click.
            </p>
            <hr />
            <h5>Tooltips in a modal</h5>
            <p>
              <a href="#!" class="tooltip-test" mdbTooltip="Tooltip">This link</a>
              and
              <a href="#!" class="tooltip-test" mdbTooltip="Tooltip">that link</a>
              have tooltips on hover.
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="modalRef.close()">
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            import { Component } from '@angular/core';
            import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

            @Component({
              selector: 'app-modal',
              templateUrl: './modal.component.html',
            })
            export class ModalComponent {

              constructor(public modalRef: MdbModalRef<ModalComponent>) {}

            }

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. 

        
            
          <div class="modal-header">
            <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
            <button
              type="button"
              class="btn-close"
              (click)="modalRef.close()"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <div class="container-fluid bd-example-row">
              <div class="row">
                <div class="col-md-4 col-example">.col-md-4</div>
                <div class="col-md-4 ms-auto col-example">.col-md-4 .ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ms-auto col-example">.col-md-3 .ms-auto</div>
                <div class="col-md-2 ms-auto col-example">.col-md-2 .ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-6 ms-auto col-example">.col-md-6 .ms-auto</div>
              </div>
              <div class="row">
                <div class="col-sm-9 col-example">
                  Level 1: .col-sm-9
                  <div class="row">
                    <div class="col-8 col-sm-6 col-example">Level 2: .col-8 .col-sm-6</div>
                    <div class="col-4 col-sm-6 col-example">Level 2: .col-4 .col-sm-6</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="modalRef.close()">
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            import { Component } from '@angular/core';
            import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

            @Component({
              selector: 'app-modal',
              templateUrl: './modal.component.html',
            })
            export class ModalComponent {

              constructor(public modalRef: MdbModalRef<ModalComponent>) {}

            }

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. 

        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent, {
                animation: 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 
        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent, {
                modalClass: 'modal-xl'
              })
            }
          }

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 
        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent, {
                modalClass: 'modal-fullscreen'
              })
            }
          }

Modal - API

Import

        
            
          import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
          …
          @NgModule ({
            ...
            imports: [MdbModalModule],
            ...
          })

Options

Options can be passed to the open method of MdbModalService.

Name Type Default Description
animation boolean true Turns modal animation on/off
backdrop boolean true Includes a modal-backdrop element.
containerClass string '' Adds new class to modal container.
data any {} Passes data to a modal component.
ignoreBackdropClick boolean> false Specifies whether to close modal on backdrop click.
keyboard boolean true Closes the modal when escape key is pressed.
modalClass string '' Adds new class to element with .modal-dialog class. 
        
            
            <button class="btn btn-primary" (click)="openModal()">Open modal</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { ModalComponent } from 'your-path-to-modal-component';
            import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

            @Component(
              { selector: 'create-dynamic-modal',
              templateUrl: './create-dynamic-modal.component.html',
            })
            export class AppComponent {
              modalRef: MdbModalRef<ModalComponent> | null = null;

              config = {
                animation: true,
                backdrop: true,
                containerClass: 'right',
                data: {
                  title: 'Custom title'
                },
                ignoreBackdropClick: false,
                keyboard: true,
                modalClass: 'modal-top-right'
              }

              constructor(private modalService: MdbModalService) {}

              openModal() {
                this.modalRef = this.modalService.open(ModalComponent, this.config);
              }
            }

Methods

MdbModalService

Method Description
open(componentType, config?: MdbModalConfig<D>) Opens modal. 
        
            
            <button class="btn btn-primary" (click)="openModal()">Open modal</button>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { ModalComponent } from 'your-path-to-modal-component';
            import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

            @Component(
              { selector: 'create-dynamic-modal',
              templateUrl: './create-dynamic-modal.component.html',
            })
            export class AppComponent {
              modalRef: MdbModalRef<ModalComponent> | null = null;

              constructor(private modalService: MdbModalService) {}

              openModal() {
                this.modalRef = this.modalService.open(ModalComponent);
              }
            }

MdbModalRef

Method Description
onClose: Observable<any> Returns observable on modal close. 
        
            
          <button class="btn btn-primary" (click)="openModal()">Open modal</button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { ModalComponent } from 'your-path-to-modal-component';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component(
            { selector: 'create-dynamic-modal',
            templateUrl: './create-dynamic-modal.component.html',
          })
          export class AppComponent {
            modalRef: MdbModalRef<ModalComponent> | null = null;

            constructor(private modalService: MdbModalService) {}

            openModal() {
              this.modalRef = this.modalService.open(ModalComponent);
              this.modalRef.onClose.subscribe((message: any) => {
                console.log(message);
              });
            }
          }