Angular Bootstrap Modals

Extended functionality and advanced usage. Free for personal and commercial use.

5 / 5 ( 39 reviews)

Easily customizable, adjust size, position, and content. Automatically triggered based on rules and scoring system. Multiple examples and ready to use templates.

All fully responsive. All compatible with different browsers.

What can you create with it?

Enhance UI of your project

Static UI elements aren't enough in modern web development. Enhanced Bootstrap Modals lets you create a dynamic and reactive environment similar to the websites and apps of the biggest companies.

Automated Rule and Scoring System

Make your project behave like a living organism. Create your own artificial intelligence to react to user actions.

Carts recovery system

If you didn't use abandoned cart recovery system most probably you have lost a lot of money. Create a system that allows you easily start recovering abandoned transactions.

...and much more!

Position & Sizes

Click buttons below to launch modals demo

Frame Modal

Position

Top
Bottom

Side Modal

Position

Top Right
Top Left
Bottom Right
Bottom Left

Central Modal

Size

Fluid Modal

Position

Styles examples

Launch Modal Success

Launch Modal Info

Launch Modal Danger

Launch Modal Warning

Forms Examples

Launch Modal Contact Form

Launch Modal LogIn/Register

Launch Modal Subscription Form

Launch Modal Login with Avatar

Basic usage

Basic Usage
API Reference
- ModalDirective
- ModalOptions

Basic example

Below is a most basic Modal example with a button triggering Modal via data attribute.

Click the button to trigger Modal.


<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: 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">
                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>

Position and size

To change the position or size of the modal add one of the following classes to the .modal-dialog div.

Central modal

Note: Medium size is a default value, so there isn't a dedicated class for it.

.modal-sm Small Modal

.modal-lg Large Modal

.modal-fluid Full Width Modal

Code example:


<button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#basicExample" (click)="demoBasic.show()" mdbWavesEffect>
    Small modal
</button>

<div mdbModal #demoBasic="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="demoBasic.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm waves-light" data-dismiss="modal" (click)="demoBasic.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary btn-sm waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>

Side modal

Note: To make it work properly, apart from adding a class for position, you also need to add special class .modal-side to .modal-dialog div.

Note 2: If you want to change a direction of modal animation add class .top, .right, bottom or .left to the .modal div.

.modal-side + .modal-top-right Top Right

.modal-side + .modal-top-left Top Left

.modal-side + .modal-bottom-right Bottom Right

.modal-side + .modal-bottom-right Bottom Left

Code example:


<button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#basicExample" (click)="side.show()" mdbWavesEffect>
    Top right
</button>

<div mdbModal #side="mdb-modal" class="modal fade right" id="centralModalSm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-side modal-top-right" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="side.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-light" data-dismiss="modal" (click)="side.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>

Fluid modal

Note: As in the previous example - to make it work properly, apart from adding a class for position, you also need to add special class .modal-full-height to .modal-dialog div.

Note 2: If you want to change direction a of modal animation add class .top, .right, bottom or .left to the .modal div.

.modal-full-height + .modal-right Right

.modal-full-height + .modal-left Left

.modal-full-height + .modal-bottom Bottom

.modal-full-height + .modal-top Top

Code example:


<button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#basicExample" (click)="fluid.show()" mdbWavesEffect>
    Right
</button>

<div mdbModal #fluid="mdb-modal" class="modal fade right" id="fullHeightModalRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-full-height modal-right" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="fluid.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente magnam, sunt, ea dolore
                    eum quod. Minima fugiat enim aut soluta est reprehenderit reiciendis quos, qui, amet
                    possimus laborum assumenda voluptate.
                </p>

                <ul class="list-group z-depth-0">
                    <li class="list-group-item justify-content-between">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Morbi leo risus
                        <span class="badge badge-primary badge-pill">1</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Morbi leo risus
                        <span class="badge badge-primary badge-pill">1</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary waves-light" data-dismiss="modal" (click)="fluid.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>

Frame modal

Note: As in the previous examples - to make it work properly, apart from adding a class for position, you also need to add special class .modal-frame to .modal-dialog div.

Note 2: If you want to change direction of a modal animation add class .top, .right, bottom or .left to the .modal div.

.modal-frame + .modal-bottom Bottom

.modal-frame + .modal-top Top

Code example:


<button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()" mdbWavesEffect>
    Bottom
</button>

<div mdbModal #frame="mdb-modal" class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
    <div class="modal-dialog modal-frame modal-bottom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row px-4">
                    <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
                    <button type="button" class="btn btn-secondary waves-light" data-dismiss="modal" (click)="frame.hide()" mdbWavesEffect>Close</button>
                    <button type="button" class="btn btn-primary waves-light" mdbWavesEffect>Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

Style

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 neutral information.

It requires 2 simple steps

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

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

These classes will affect following elements:

.modal-header
.badge
.fa-4x - which stands for large icon

Success modal

.modal-notify + .success

Code example:


<button type="button" class="btn btn-primary waves-light" (click)="style.show()" mdbWavesEffect>Central Modal</button>

<div mdbModal #style="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-success" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="heading lead">Modal Success</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
                    <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>
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary waves-light" mdbWavesEffect>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary" data-dismiss="modal" (click)="style.hide()" mdbWavesEffect>No, thanks</a>
            </div>
        </div>
    </div>
</div>

Info modal

.modal-notify + .info

Code example:


<button type="button" class="btn btn-primary waves-light" (click)="style.show()" mdbWavesEffect>Central Modal</button>

<div mdbModal #style="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-info" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="heading lead">Modal Info</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
                    <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>
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary waves-light" mdbWavesEffect>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary" data-dismiss="modal" (click)="style.hide()" mdbWavesEffect>No, thanks</a>
            </div>
        </div>
    </div>
</div>

Danger modal

.modal-notify + .danger

Code example:


<button type="button" class="btn btn-primary waves-light" (click)="style.show()" mdbWavesEffect>Central Modal</button>

<div mdbModal #style="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-danger" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="heading lead">Modal Danger</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
                    <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>
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary waves-light" mdbWavesEffect>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary" data-dismiss="modal" (click)="style.hide()" mdbWavesEffect>No, thanks</a>
            </div>
        </div>
    </div>
</div>

Warning modal

.modal-notify + .warning

Code example:


<button type="button" class="btn btn-primary waves-light" (click)="style.show()" mdbWavesEffect>Central Modal</button>

<div mdbModal #style="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-warning" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="heading lead">Modal Warning</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
                    <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>
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary waves-light" mdbWavesEffect>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary" data-dismiss="modal" (click)="style.hide()" mdbWavesEffect>No, thanks</a>
            </div>
        </div>
    </div>
</div>

Forms

You can use one of our predefined templates or create your custom form by using our Inputs elements.

Examples

Contact Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Contact form</button>
<!--Modal: Contact form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="form.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body mb-0">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbInputDirective type="text" id="form19" class="form-control">
                    <label for="form19">Your name</label>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input mdbInputDirective type="password" id="form20" class="form-control">
                    <label for="form20">Your email</label>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-tag prefix"></i>
                    <input mdbInputDirective type="text" id="form21" class="form-control">
                    <label for="form21">Subject</label>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-pencil prefix"></i>
                    <textarea mdbInputDirective type="text" id="form8" class="md-textarea mb-0"></textarea>
                    <label for="form8">Your message</label>
                </div>

                <div class="text-center mt-1-half">
                    <button class="btn btn-info mb-2 waves-light" mdbWavesEffect>Send <i class="fa fa-send ml-1"></i></button>
                </div>

            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Contact form-->

Login / Register Form MDB Pro component


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Login / Register form</button>
<!--Modal: Login / Register Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Modal cascading tabs-->
            <div class="modal-c-tabs">

                <!-- Tab panels -->
                <mdb-tabset #staticTabs [buttonClass]="'nav nav-tabs tabs-2 light-blue darken-3'" [contentClass]="''" class="tab-content">
                    <!--Panel 7-->
                    <mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel" heading="<i class='fa fa-user mr-1'></i> Login">

                        <!--Body-->
                        <div class="modal-body mb-1">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input mdbInputDirective type="text" id="form22" class="form-control">
                                <label for="form22">Your email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input mdbInputDirective type="password" id="form23" class="form-control">
                                <label for="form23">Your password</label>
                            </div>
                            <div class="text-center mt-2">
                                <button class="btn btn-info waves-light" mdbWavesEffect>Log in <i class="fa fa-sign-in ml-1"></i></button>
                            </div>
                        </div>
                        <!--Footer-->
                        <div class="modal-footer display-footer">
                            <div class="options text-center text-md-right mt-1">
                                <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
                                <p>Forgot <a href="#" class="blue-text">Password?</a></p>
                            </div>
                            <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbWavesEffect>Close</button>
                        </div>

                    </mdb-tab>
                    <!--/.Panel 7-->

                    <!--Panel 8-->
                    <mdb-tab class="tab-pane fade" id="panel8" role="tabpanel" heading="<i class='fa fa-user-plus mr-1'></i> Register">

                        <!--Body-->
                        <div class="modal-body">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input mdbInputDirective type="text" id="form24" class="form-control">
                                <label for="form24">Your email</label>
                            </div>

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

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

                            <div class="text-center form-sm mt-2">
                                <button class="btn btn-info waves-light" mdbWavesEffect>Sign up <i class="fa fa-sign-in ml-1"></i></button>
                            </div>

                        </div>
                        <!--Footer-->
                        <div class="modal-footer">
                            <div class="options text-right">
                                <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
                            </div>
                            <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbWavesEffect>Close</button>
                        </div>
                    </mdb-tab>
                    <!--/.Panel 8-->
                </mdb-tabset>

            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login / Register Form-->

Subscription Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Subscription form</button>
<!--Modal: Subscription From-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fa fa-newspaper-o"></i> Subscription form</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="form.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body mb-0">

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input mdbInputDirective type="password" id="form27" class="form-control">
                    <label for="form27">Your name</label>
                </div>

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

                <div class="text-center mt-1-half">
                    <button class="btn btn-info mb-1 waves-light" mdbWavesEffect>Submit <i class="fa fa-check ml-1"></i></button>
                </div>

            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Subscription From-->

Login with Avatar Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Login with avatar form</button>
<!--Modal: Login with Avatar Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive">
            </div>
            <!--Body-->
            <div class="modal-body text-center mb-1">

                <h5 class="mt-1 mb-2">Maria Doe</h5>

                <div class="md-form ml-0 mr-0">
                    <input mdbInputDirective type="password" type="text" id="form29" class="form-control ml-0">
                    <label for="form29" class="ml-0">Enter password</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-cyan mt-1 waves-light" mdbWavesEffect>Login <i class="fa fa-sign-in ml-1"></i></button>
                </div>
            </div>

        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login with Avatar Form-->

Login Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Login form</button>
<!--Modal: Login Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fa fa-user"></i> Log in</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="form.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbInputDirective type="text" id="form30" class="form-control">
                    <label for="form30">Your email</label>
                </div>

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

                <div class="text-center mt-2">
                    <button class="btn btn-info waves-light" mdbWavesEffect>Log in <i class="fa fa-sign-in ml-1"></i></button>
                </div>

            </div>
            <!--Footer-->
            <div class="modal-footer">
                <div class="options text-center text-md-right mt-1">
                    <p>Not a member? <a href="#">Sign Up</a></p>
                    <p>Forgot <a href="#">Password?</a></p>
                </div>
                <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbWavesEffect>Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login Form-->

Register Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Register form</button>
<!--Modal: Register Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fa fa-user-plus"></i> Register</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="form.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbInputDirective type="text" id="form32" class="form-control">
                    <label for="form32">Your email</label>
                </div>

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

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

                <div class="text-center mt-2">
                    <button class="btn btn-info waves-light" mdbWavesEffect>Sign up <i class="fa fa-sign-in ml-1"></i></button>
                </div>

            </div>
            <!--Footer-->
            <div class="modal-footer">
                <div class="options text-center text-md-right mt-1">
                    <p>Already have an account? <a href="#">Log In</a></p>
                </div>
                <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbWavesEffect>Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Register Form-->

Scrolling lenghty content

When modal's content become too long for the user’s viewport or device, they scroll independent of the page itself. You only need to set overflow: auto; to <div mdbModal>. Try the demo below to see what we mean.

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.

Varying modal content

Have a bunch of buttons that all trigger the same modal, just with slightly different contents?

HTML
TS


<div class="bd-example">
    <button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" (click)="show( '@mdo' )" mdbWavesEffect>Open modal for @mdo</button>
    <button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" (click)="show( '@fat' )" mdbWavesEffect>Open modal for @fat</button>
    <button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" (click)="show( '@getbootstrap' )" mdbWavesEffect>Open modal for @getbootstrap</button>

    <div mdbModal #content="mdb-modal" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">New message to {{ name }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="content.hide()">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="md-form">
                            <input type="text" class="form-control" id="recipient-name" [value]="name">
                        </div>
                        <div class="md-form">
                            <textarea type="text" id="message-text" class="md-textarea"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-light" data-dismiss="modal" (click)="content.hide()" mdbWavesEffect>Close</button>
                    <button type="button" class="btn btn-primary waves-light" mdbWavesEffect>Send message</button>
                </div>
            </div>
        </div>
    </div>
</div>


import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'modal-content-example',
  templateUrl: 'modal-content.html',
})

export class ModalContentComponent {
    @ViewChild('content') public contentModal;
    public name: string;

    show(value:string){
        this.name = value;
        this.contentModal.show();
    }
}

Remove animation

For modals that simply appear rather than fade into view, remove the .fade class from your modal markup.


<div mdbModal #withoutAnimation="mdb-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="mywanimationLabel" aria-hidden="true">
    ...
</div>

Accessibility

Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself. Additionally, you may give a description of your modal dialog with aria-describedby on .modal.


<button type="button" class="btn btn-primary relative waves-light" (click)="video.show()" mdbWavesEffect>video</button>

<div mdbModal #video="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myvideoLabel" aria-hidden="true" (onHide)="stopVideoPlayer()">
    <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)="video.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9 wow fadeInRight">
                    <iframe class="embed-responsive-item" #videoPlayer src="https://www.youtube.com/embed/IQyauRAxvjI" allowfullscreen></iframe>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="video.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>


import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'modal-video-example',
  templateUrl: 'modal-video.html',
})

export class ModalVideoComponent {
    @ViewChild('videoPlayer') public player;

    stopVideoPlayer(){
        this.player.nativeElement.src = this.player.nativeElement.src;
    }
}

Auto focus input in Modal

HTML
TS


<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: 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 class="md-form">
                     <input #focusInput mdbInputDirective type="text" id="form1" class="form-control">
                     <label for="form1" class="">Example label</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>


import { Component, ElementRef, HostListener, ViewChild, Output, EventEmitter } from '@angular/core';

              
@Component({
selector: 'inputfocus',

  })
  export class InputFocusComponent {
    @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>();
  
    @ViewChild('focusInput') focusInput: ElementRef;
  
    @HostListener('focusout', ['$event']) public onListenerTriggered(event: any): void {
      this.setFocusToInput();
    }
  
    setFocusToInput() {
      this.focusInput.nativeElement.focus();
    }
  }

API Reference

ModalDirective

Selector	`[mdbModal]`
Exported as	`mdbModal`

Inputs

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

Outputs (events)

`(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 relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Basic Example</button>

<div mdbModal #basicModal="mdb-modal" [config]="{keyboard: false}" 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">
                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>

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.
`(event)="name.focusOtherModal()"`	Return type: `void` Events tricks.

Example:


<button type="button" class="btn btn-primary waves-light" (click)="staticModal.show()" mdbWavesEffect>Static modal</button>
 
<div class="modal fade" mdbModal #staticModal="mdb-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">
                <p>This is static modal.</p>
                <p>Click <b>×</b> to close modal.</p>
            </div>
        </div>
    </div>
</div>

ModalOptions

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.
`class`	Type: `string` Css class for opened modal.
`animated`	Type: `boolean` Toggle animation.

Example:

HTML
TS


<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: 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 class="md-form">
                     <input #focusInput mdbInputDirective type="text" id="form1" class="form-control">
                     <label for="form1" class="">Example label</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
                <button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>
            </div>
        </div>
    </div>
</div>


import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'your-path-to/typescripts/free';

@Component({
  selector: 'modal-auto-example',
  templateUrl: 'modal-auto.html',
})

export class ModalAutoComponent {
    @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;
    }
}

Angular Bootstrap Modals

Extended functionality and advanced usage. Free for personal and commercial use.

What can you create with it?

Enhance UI of your project

Automated Rule and Scoring System

Related content system

Carts recovery system

...and much more!

Position & Sizes

Frame Modal

Position

Side Modal

Position

Central Modal

Size

Fluid Modal

Position

Styles examples

Forms Examples

Basic usage

Contents

Basic example

Position and size

Style

Success modal

Info modal

Danger modal

Warning modal

Forms

Scrolling lenghty content

Using the grid

Varying modal content

Remove animation

Accessibility

Embedding YouTube videos

Auto focus input in Modal

API Reference

ModalDirective

ModalOptions

Angular Bootstrap Modals

Extended functionality and advanced usage. Free for personal and commercial use.

What can you create with it?

Enhance UI of your project

Automated Rule and Scoring System

Related content system

Carts recovery system

...and much more!

Position & Sizes

Frame Modal

Position

Side Modal

Position

Central Modal

Size

Fluid Modal

Position

Styles examples

v52gs1

Forms Examples

Contact form

Subscription form

Maria Doe

Basic usage

Contents

Basic example

Position and size

Style

Success modal

Info modal

Danger modal

Warning modal

Forms

Scrolling lenghty content

Using the grid

Varying modal content

Remove animation

Accessibility

Embedding YouTube videos

Auto focus input in Modal

API Reference

ModalDirective

ModalOptions