Material Design Bootstrap

bootstrap Modals

Modals are streamlined, but flexible dialog prompts with the minimum required functionality and smart defaults.

They are used to introduce our user to any crucial message, you don’t want him to miss. Keep in mind, that spamming him with such may be burdensome so you should always place them with reasonableness.

Modals might also contribute to improving navigation, by providing it with key UI elements, such as logging in, signing up or subscribing to newsletter CTA’s. Using them in a proper way benefits User Experience and simplifies our website.

Examples

Basic example

Below is a most basic Modal example with a button triggering Modal.

Click the button to trigger Modal.


<button md-ripple type="button" class="btn btn-primary relative" (click)="basicModal.show()" ripple-radius>Basic Example</button>

<div bsModal #basicModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>
            </div>
        </div>
    </div>
</div>

Modal Login Premium component


<button md-ripple type="button" class="btn btn-primary relative" (click)="loginModal.show()" ripple-radius>Basic Example</button>

<div bsModal #loginModal="bs-modal" class="modal fade modal-ext" tabindex="-1" role="dialog" aria-labelledby="myLoginModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="loginModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h3 class="w-100"><i class="fa fa-user"></i> Login</h3>

          </div>
          <div class="modal-body">
            <div class="md-form">
                <i class="fa fa-envelope prefix"></i>
                <input mdbActive type="text" id="form2" class="form-control">
                <label for="form2">Your email</label>
            </div>

            <div class="md-form">
                <i class="fa fa-lock prefix"></i>
                <input mdbActive type="password" id="form3" class="form-control">
                <label for="form3">Your password</label>
            </div>
            <div class="text-center">
                <button class="btn btn-primary btn-lg" ripple-radius>Login</button>
           </div> 
          </div>

          <div class="modal-footer">
            <div class="options text-right">
                <p>Not a member? <a href="javascript:;;">Sign Up</a></p>
                <p>Forgot <a href="javascript:;;">Password?</a></p>
            </div>
            <button type="button" class="btn btn-default ml-auto" aria-label="Close" (click)="loginModal.hide()" ripple-radius>Close</button>
          </div>
        </div>
      </div>
    </div>

Modal RegisterPremium component


<button md-ripple type="button" class="btn btn-warning relative" (click)="registerModal.show()" ripple-radius>Modal Register</button>

<div bsModal #registerModal="bs-modal" class="modal fade modal-ext" tabindex="-1" role="dialog" aria-labelledby="myRegisterModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        
        <div class="modal-content">
            
            <div class="modal-header flex-column">
                <button type="button" class="close pull-right" aria-label="Close" (click)="registerModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h3 class="w-100"><i class="fa fa-user"></i> Register with:</h3>
                <div class="flex-row">
                    <a href="#" class="btn-floating btn-fb btn-small" ripple-radius><i class="fa fa-facebook"></i></a>
                    <a href="#" class="btn-floating btn-tw btn-small" ripple-radius><i class="fa fa-twitter"></i></a>
                    <a href="#" class="btn-floating btn-gplus btn-small" ripple-radius><i class="fa fa-google-plus"></i></a>
                    <a href="#" class="btn-floating btn-li btn-small" ripple-radius><i class="fa fa-linkedin"></i></a>
                    <a href="#" class="btn-floating btn-git btn-small" ripple-radius><i class="fa fa-github"></i></a>
                </div>
            </div>
            
            <div class="modal-body">
                <div class="md-form">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbActive type="text" id="form2" class="form-control">
                    <label for="form2">Your email</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-lock prefix"></i>
                    <input mdbActive type="password" id="form3" class="form-control">
                    <label for="form3">Your password</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-lock prefix"></i>
                    <input mdbActive type="password" id="form4" class="form-control">
                    <label for="form4">Repeat password</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-primary btn-lg" ripple-radius>Sign up</button>

                    <fieldset class="form-group">
                        <input type="checkbox" id="checkbox1">
                        <label for="checkbox1">Subscribe me to the newsletter</label>
                    </fieldset>
                </div>
            </div>
            
            <div class="modal-footer">
                <div class="options">
                    <p>Already have an account? <a href="#">Log in</a></p>
                </div>
                <button type="button" class="btn btn-default ml-auto" aria-label="Close" (click)="registerModal.hide()" ripple-radius>Close</button>
            </div>
        </div>
        
    </div>
</div>

Modal Subscription

Premium component


<button md-ripple type="button" class="btn btn-success relative" (click)="subModal.show()" ripple-radius>Subscription Form</button>

<div bsModal #subModal="bs-modal" class="modal fade modal-ext" tabindex="-1" role="dialog" aria-labelledby="mySubModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        
        <div class="modal-content">
            
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="subModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Subscription form</h4>
            </div>
            
            <div class="modal-body">
                <p>We'll write rarely, but only the best content.</p>
                <br>
                <div class="md-form">
                    <i class="fa fa-user prefix"></i>
                    <input mdbActive type="text" id="form22" class="form-control">
                    <label for="form22">Your name</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbActive type="text" id="form32" class="form-control">
                    <label for="form32">Your email</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-primary" ripple-radius>Submit</button>
                </div>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-default ml-auto" aria-label="Close" (click)="subModal.hide()" ripple-radius>Close</button>
            </div>
        </div>
        
    </div>
</div>

Modal Contact

Premium component


<button md-ripple type="button" class="btn btn-info relative" (click)="contactModal.show()" ripple-radius>Contact Form</button>

<div bsModal #contactModal="bs-modal" class="modal fade modal-ext" tabindex="-1" role="dialog" aria-labelledby="myContactModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        
        <div class="modal-content">
            
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="contactModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Write to us</h4>
            </div>
            
            <div class="modal-body">
                <p>We like to receive a messages.</p>
                <br>
                <div class="md-form">
                    <i class="fa fa-user prefix"></i>
                    <input mdbActive type="text" id="form22" class="form-control">
                    <label for="form42">Your name</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbActive type="text" id="form32" class="form-control">
                    <label for="form34">Your email</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-tag prefix"></i>
                    <input mdbActive type="text" id="form32" class="form-control">
                    <label for="form34">Subject</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-pencil prefix"></i>
                    <textarea mdbActive type="text" id="form8" class="md-textarea"></textarea>
                    <label for="form8">Icon Prefix</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-primary" ripple-radius>Submit</button>

                    <div class="call">
                        <p>Or would you prefer to call?<span class="cf-phone"><i class="fa fa-phone"> +01 234 565 280</i></span></p>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-default ml-auto" aria-label="Close" (click)="contactModal.hide()" ripple-radius>Close</button>
            </div>
        </div>
        
    </div>
</div>

Optional sizes

Modals have two optional sizes.

Small Modal


<button md-ripple type="button" class="btn btn-primary relative" (click)="basicsmModal.show()" ripple-radius>Small Modal</button>

<div bsModal #basicsmModal="bs-modal" class="modal fade modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicsmModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicsmModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>
            </div>
        </div>
    </div>
</div>

Large Modal


<button md-ripple type="button" class="btn btn-primary relative" (click)="basicModal.show()" ripple-radius>Large Modal</button>

<div bsModal #basicModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>
            </div>
        </div>
    </div>
</div>

Using the grid system

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.


<button type="button" class="btn btn-primary" (click)="childModal.show()" ripple-radius>Basic Modal</button>

<div bsModal  #childModal="bs-modal"  id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myGridModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="hide()"><span aria-hidden="true">×</span></button>
      </div>
      <div class="modal-body child-modal">
          <div class="container-fluid">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
         <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
                  <div class="col-8 col-sm-6">
                      Level 2: .col-8 .col-sm-6
                  </div>
                  <div class="col-4 col-sm-6">
                      Level 2: .col-4 .col-sm-6
                  </div>
              </div>
            </div>
          </div>
        </div> 
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="hide()" ripple-radius>Close</button>
        <button type="button" class="btn btn-primary" ripple-radius>Save changes</button>     
      </div>
    </div>
  </div>
</div>

Data structure:

It's necessary to import and export some elements to your component.ts file, like it's shown below.


import { ViewChild } from '@angular/core';
import { ModalDirective } from 'your_path/angular-bootstrap-md/free/modals/modalDirective';

export class AppComponent {

    @ViewChild('childModal') public childModal:ModalDirective;
    @ViewChild('test') test;

    show(){
        this.childModal.show();
    }
    hide(){
        this.childModal.hide();
    }
}

API Reference

ModalDirective

Selector	`[bsModal]`
Exported as	`bs-modal`

Inputs

[config] Type: ModalOptions
allows to set modal configuration via element property

Properties

`backdrop`	Type: `boolean \| "static"` Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
`ignoreBackdropClick`	Type: `boolean` Ignore the backdrop click.
`keyboard`	Type: `boolean` Closes the modal when the escape key is pressed.
`show`	Type: `boolean` Shows the modal when initialized.

Example:


<button md-ripple type="button" class="btn btn-primary relative" (click)="basicModal.show()" ripple-radius>Basic Example</button>

<div bsModal #basicModal="bs-modal" [config]="{keyboard: true}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>
            </div>
        </div>
    </div>
</div>

Outputs

`(onHidden)="onHidden()"`	Event is fired when the modal has finished being hidden from the user.
`(onHide)="onHide()"`	Event is fired instantly when the hide instance method has been called.
`(onShow)="onShow()"`	Event fires instantly when the show instance method is called.
`(onShown)="onShown()"`	Event is fired when the modal has been made visible to the user.

Example:


<button type="button" class="btn btn-primary" (click)="showModal()">Auto-shown modal</button>
<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Auto shown modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>I am a modal that is shown right after initialization!</p>
        <p>I wasn't present in DOM until you clicked the button</p>
        <p>When you close me, I'll be removed from the DOM</p>
      </div>
    </div>
  </div>
</div>


import { ViewChild } from '@angular/core';
import { ModalDirective } from 'your_path/angular-bootstrap-md/free/modals/modalDirective';

export class AppComponent {

  @ViewChild('autoShownModal') public autoShownModal:ModalDirective;
  public isModalShown:boolean = true;
 
  public showModal():void {
    this.isModalShown = true;
  }
 
  public hideModal():void {
    this.autoShownModal.hide();
  }
 
  public onHidden():void {
    this.isModalShown = false;
  }
}

Methods

`(event)="name.show()"`	Return type: `void` Allows to manually open modal.
`(event)="name.hide()"`	Return type: `void` Allows to manually close modal.
`(event)="name.toggle(value: boolean)()"`	Return type: `void` Allows to manually toggle modal visibility.

Example:


<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
 
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal.
        Click <b>×</b> to close modal.
      </div>
    </div>
  </div>
</div>