Sign in


Sign up


Angular Bootstrap Modals


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

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.

Related content system

Don't let your user look for the relevant content. Create a smart system which will always prompt the right content for the specific person.

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
Central Modal
Size



Fluid Modal
Position



Styles examples

Forms Examples

Basic usage

Contents

  1. Basic Usage
  2. API Reference

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()" mdbRippleRadius>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()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary relative waves-light" mdbRippleRadius>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()" mdbRippleRadius>
    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()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary btn-sm waves-light" mdbRippleRadius>Save changes</button>
            </div>
        </div>
    </div>
</div>
                

Side modal

Note: To make it works properly, apart from adding a class for position, you also need 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()" mdbRippleRadius>
    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()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbRippleRadius>Save changes</button>
            </div>
        </div>
    </div>
</div>
                

Fluid modal

Note: As in the previous example - to make it works properly, apart from adding a class for position, you also need add special class .modal-full-height 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-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()" mdbRippleRadius>
    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()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbRippleRadius>Save changes</button>
            </div>
        </div>
    </div>
</div>
                

Frame modal

Note: As in the previous examples - to make it works properly, apart from adding a class for position, you also need add special class .modal-frame 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-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()" mdbRippleRadius>
    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()" mdbRippleRadius>Close</button>
                    <button type="button" class="btn btn-primary waves-light" mdbRippleRadius>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:

  1. .modal-header

  2. .badge

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

  4. .btn-primary-modal & btn-secondary-modal - 2 dedicated form modal button classes. If you want to use a classic Bootstrap buttons, just remove -modal postfix (for example: .btn-primary, btn-danger).

Success modal

.modal-notify + .success

Code example:


<button type="button" class="btn btn-primary waves-light" (click)="style.show()" mdbRippleRadius>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-modal waves-light" mdbRippleRadius>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal" (click)="style.hide()" mdbRippleRadius>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()" mdbRippleRadius>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-modal waves-light" mdbRippleRadius>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal" (click)="style.hide()" mdbRippleRadius>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()" mdbRippleRadius>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-modal waves-light" mdbRippleRadius>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal" (click)="style.hide()" mdbRippleRadius>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()" mdbRippleRadius>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-modal waves-light" mdbRippleRadius>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal" (click)="style.hide()" mdbRippleRadius>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()" mdbRippleRadius>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 mdbActive 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 mdbActive 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 mdbActive 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 mdbActive 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" mdbRippleRadius>Send <i class="fa fa-send ml-1"></i></button>
                </div>

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

Login / Register Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbRippleRadius>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 mdbActive 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 mdbActive 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" mdbRippleRadius>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()" mdbRippleRadius>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 mdbActive 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 mdbActive 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 mdbActive 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" mdbRippleRadius>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()" mdbRippleRadius>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()" mdbRippleRadius>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 mdbActive 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 mdbActive 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" mdbRippleRadius>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()" mdbRippleRadius>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 mdbActive 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" mdbRippleRadius>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()" mdbRippleRadius>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 mdbActive 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 mdbActive 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" mdbRippleRadius>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()" mdbRippleRadius>Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login Form-->
                

Register Form


<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbRippleRadius>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 mdbActive 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 mdbActive 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 mdbActive 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" mdbRippleRadius>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()" mdbRippleRadius>Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Register Form-->
                

Scrolling long content

When modals 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?


<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' )" mdbRippleRadius>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' )" mdbRippleRadius>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' )" mdbRippleRadius>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()" mdbRippleRadius>Close</button>
                    <button type="button" class="btn btn-primary waves-light" mdbRippleRadius>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.

Embedding YouTube videos


<button type="button" class="btn btn-primary relative waves-light" (click)="video.show()" mdbRippleRadius>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()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbRippleRadius>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;
    }
} 
            

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()" mdbRippleRadius>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()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary waves-light" mdbRippleRadius>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()" mdbRippleRadius>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:


<button type="button" class="btn btn-primary waves-light" (click)="showModal()" mdbRippleRadius>Auto-shown modal</button>

<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" mdbModal #autoShownModal="mdb-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 { 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;
    }
}