Angular Bootstrap Modal Styles

Angular Modal Styles - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap modal styles are a set of predefined styles which you can use to add some emotional weight to your information, ranging from a simple warning to critical system failure or from an operation success to a piece of neutral information.

See also: Modal Core Documentation, Modal Forms and Modal Templates.

Launch Modal Success

Modal Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

Get it now No, thanks
Launch Modal Info

Modal Info

Material Design for Bootstrap - dashboard

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.

Get it now No, thanks
Launch Modal Danger

Modal Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.

v52gs1

Get it now No, thanks
Launch Modal Warning

Modal Warning

Michal Szymanski - founder of Material Design for Bootstrap

Jane

Consultant

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Get it now No, thanks

Basic usage

By using our predefined modal styles you can add some emotional weight to your information, ranging from a simple warning to critical system failure or from an operation success to a piece of neutral information.

It requires 2 simple steps

Step 1: Add the class .modal-notify to the .modal-dialog div.

Step 2: Add the class .success, .info, .danger or .warning to the .modal-dialog div.


These classes will affect the following elements:

  1. .modal-header

  2. .badge

  3. .fa-4x - which stands for large icon

Success modal

.modal-notify + .modal-success 

        
            
              <button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
              mdbWavesEffect>Launch Modal</button>
            <div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
              aria-hidden="true">
              <div class="modal-dialog modal-notify modal-success" role="document">
                <!--Content-->
                <div class="modal-content">
                  <!--Header-->
                  <div class="modal-header">
                    <p class="heading lead">Modal Success</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                      <span aria-hidden="true" class="white-text">&times;</span>
                    </button>
                  </div>
                  <!--Body-->
                  <div class="modal-body">
                    <div class="text-center">
                      <mdb-icon fas icon="check" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur
                        in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                    </div>
                  </div>
                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <a type="button" mdbBtn color="success" class="waves-effect" mdbWavesEffect>Get it now
                      <mdb-icon far icon="gem" class="ml-1"></mdb-icon>
                    </a>
                    <a type="button" mdbBtn color="success" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()">No, thanks</a>
                  </div>
                </div>
                <!--/.Content-->
              </div>
            </div>

Info modal

.modal-notify + .modal-info 

        
            
              <button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
              mdbWavesEffect>Launch Modal</button>
            <div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
              aria-hidden="true">
              <div class="modal-dialog modal-notify modal-info" role="document">
                <!--Content-->
                <div class="modal-content">
                  <!--Header-->
                  <div class="modal-header">
                    <p class="heading lead">Modal Info</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                      <span aria-hidden="true" class="white-text">&times;</span>
                    </button>
                  </div>
                  <!--Body-->
                  <div class="modal-body">
                    <div class="text-center">
                      <mdb-icon fas icon="check" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur
                        in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                    </div>
                  </div>
                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Get it now
                      <mdb-icon far icon="gem" class="ml-1"></mdb-icon>
                    </a>
                    <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()">No, thanks</a>
                  </div>
                </div>
                <!--/.Content-->
              </div>
            </div>

Danger modal

.modal-notify + .modal-danger 

        
            
            <button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
            mdbWavesEffect>Launch Modal</button>
            <div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
              aria-hidden="true">
              <div class="modal-dialog modal-notify modal-danger" role="document">
                <!--Content-->
                <div class="modal-content">
                  <!--Header-->
                  <div class="modal-header">
                    <p class="heading lead">Modal Danger</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                      <span aria-hidden="true" class="white-text">&times;</span>
                    </button>
                  </div>
                  <!--Body-->
                  <div class="modal-body">
                    <div class="text-center">
                      <mdb-icon fas icon="check" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur
                        in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                    </div>
                  </div>
                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <a type="button" mdbBtn color="danger" class="waves-effect" mdbWavesEffect>Get it now
                      <mdb-icon far icon="check" class="ml-1"></mdb-icon>
                    </a>
                    <a type="button" mdbBtn color="danger" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()">No, thanks</a>
                  </div>
                </div>
                <!--/.Content-->
              </div>
            </div>

Warning modal

.modal-notify + .modal-warning 

        
            
              <button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
              mdbWavesEffect>Launch Modal</button>
            <div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
              aria-hidden="true">
              <div class="modal-dialog modal-notify modal-warning" role="document">
                <!--Content-->
                <div class="modal-content">
                  <!--Header-->
                  <div class="modal-header">
                    <p class="heading lead">Modal Warning</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
                      <span aria-hidden="true" class="white-text">&times;</span>
                    </button>
                  </div>
                  <!--Body-->
                  <div class="modal-body">
                    <div class="text-center">
                      <mdb-icon fas icon="check" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur
                        in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                    </div>
                  </div>
                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <a type="button" mdbBtn color="warning" class="waves-effect" mdbWavesEffect>Get it now
                      <mdb-icon far icon="gem" class="ml-1"></mdb-icon>
                    </a>
                    <a type="button" mdbBtn color="warning" outline="true" class="waves-effect" mdbWavesEffect (click)="frame.hide()">No, thanks</a>
                  </div>
                </div>
                <!--/.Content-->
              </div>
            </div>

Angular Modals - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of modals component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { ModalModule, ButtonsModule, WavesModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { ModalModule, ButtonsModule, WavesModule } from 'angular-bootstrap-md';
Import example Modules list

Directive

mdbModal

Selector: mdbModal

Type: ModalDirective

Inputs

Inputs

Name Type Default Description Example
[config] ModalOptions { } allows to set modal configuration via element property [config]="{backdrop: false}"

ModalOptions

Name Type Default Description Example
[config] ModalOptions { } allows to set modal configuration via element property [config]="{backdrop: false}"
backdrop boolean | "static" true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. [config]="{backdrop: false}"
ignoreBackdropClick boolean false Ignore the backdrop click. [config]="{ignoreBackdropClick: true}"
keyboard boolean true Closes the modal when the escape key is pressed. [config]="{keyboard: false}"
show boolean false Shows the modal when initialized. [config]="{show: true}"
class string ' ' Css class for opened modal. [config]="{class: 'custom-class'}"

Outputs

Name Type Description Example
closed EventEmitter<ModalDirective> Event is fired when the modal has finished being hidden from the user. (closed)="onClosed($event)"
close EventEmitter<ModalDirective> Event is fired instantly when the hide instance method has been called. (close)="onClose($event)"
open EventEmitter<ModalDirective> Event fires instantly when the show instance method is called. (open)="onOpen($event)"
opened EventEmitter<ModalDirective> Event is fired when the modal has been made visible to the user. (opened)="onOpened($event)"

Methods

In below table you can find every method which is available in ModalDirective.

Name Description
(event)="name.show()" Allows to manually open modal.
(event)="name.hide()" Allows to manually close modal.
(event)="name.toggle(value: boolean)()" Allows to manually toggle modal visibility.
(event)="name.focusOtherModal()" Events tricks.