Material Design for Bootstrap

Enhanced Bootstrap Modals


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

Available versions for Material Design for Bootstrap 4 or Pure Bootstrap 4 plugin without Material Design look.

Note: If you use MDB version higher than 4.3.1 (Free or Pro), Enhanced Bootstrap Modal are already part of your package.


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.


Live demo Getting started

What you can 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 similarly 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 you 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 recover system most probably you have lost a lot of money. Create a system that allows you easily start recovering abandoned transactions.

...and many 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

Getting started

Choose your version

1. MDB - As a part of Material Design for Bootstrap Package

Note: If you use MDB version higher than 4.3.1 (Free or Pro), Enhanced Bootstrap Modal are already part of your package. You can miss "Getting Started" part and jump directly to the documentation.

If you need something more than just Modals you can use it together with our framework and take advantage of the full power of Material Design for Bootstrap .

Learn More about MDB

2. Bootstrap Plugin - As a plugin for Bootstrap 4 with no MDB dependency and no Material Design look

You don't like or don't need Material Design? No problem. Instead of MDB use our plugin written for the newest Bootstrap 4.

Features MDB Package Bootstrap Plugin
Requires Bootstrap Yes Yes
Requires jQuery Yes Yes
Requires MDB Yes No
Free for personal use
Free for commercial use
Get it
Direct download
GitHub
Direct download
GitHub

Basic usage

Contents

  1. Basic Usage
  2. Advanced Usage
  3. Automation and scoring
  4. Analytics
  5. Subscription

Basic example

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

Click the button to trigger Modal.

                

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basicExample">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                ...
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Modal -->

                
            

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:

                                            

<!-- Central Modal Small -->
<div class="modal fade" id="centralModalSm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">

                                            
                                        

Side modal

Note: To make it works properly, apart from adding a class for position, you also need add special class .side-modal 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:

                                            

                                        
<div 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">

                                            
                                        

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:

                                            

<!-- Full Height Modal Right -->
<div 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">

                                            
                                        

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:

                                            

<!-- Frame Modal Bottom -->
<div class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-frame modal-bottom" role="document">

                                            
                                        

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 stand 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:

                                            

<!-- Central Modal Medium Success -->
<div 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">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">Modal Success</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                </button>
            </div>

            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-1 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>

            <!--Footer-->
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Central Modal Medium Success-->

                                            
                                        

Info modal

.modal-notify + .info

Code example:

                                            

<!-- Central Modal Medium Info -->
<div class="modal fade" id="centralModalInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-info" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">Modal Info</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                </button>
            </div>

            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-1 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>

            <!--Footer-->
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Central Modal Medium Info-->

                                            
                                        

Danger modal

.modal-notify + .danger

Code example:

                                            

<!-- Central Modal Medium Danger -->
<div class="modal fade" id="centralModalDanger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-danger" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">Modal Danger</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                </button>
            </div>

            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-1 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>

            <!--Footer-->
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Central Modal Medium Danger-->

                                            
                                        

Warning modal

.modal-notify + .warning

Code example:

                                            

<!-- Central Modal Medium Warning -->
<div class="modal fade" id="centralModalWarning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-warning" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">Modal Warning</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                </button>
            </div>

            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-1 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>

            <!--Footer-->
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Central Modal Medium Warning-->

                                            
                                        

Forms

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

Examples

Contact Form

                                            

<!--Modal: Contact form-->
<div 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">
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4>
            </div>
            <!--Body-->
            <div class="modal-body mb-0">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input 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 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 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 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">Send <i class="fa fa-send ml-1"></i></button>
                </div>

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

                                            
                                        

Login / Register Form

                                            

<!--Modal: Login / Register Form-->
<div 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">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-user mr-1"></i> Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fa fa-user-plus mr-1"></i> Register</a>
                    </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content">
                    <!--Panel 7-->
                    <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

                        <!--Body-->
                        <div class="modal-body mb-1">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input 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 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">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 waves-effect ml-auto" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                        </div>

                    </div>
                    <!--/.Panel 7-->

                    <!--Panel 8-->
                    <div class="tab-pane fade" id="panel8" role="tabpanel">

                        <!--Body-->
                        <div class="modal-body">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input 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 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 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">Sign up <i class="fa fa-sign-in ml-1"></i></button>
                            </div>

                            <fieldset class="additional-option">
                                <input type="checkbox" id="checkbox21">
                                <label for="checkbox21">Subscribe me to the newsletter</label>
                            </fieldset>

                        </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 waves-effect ml-auto" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                        </div>
                    </div>
                    <!--/.Panel 8-->
                </div>

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

                                            
                                        

Subscription Form

                                            

<!--Modal: Subscription From-->
<div 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">
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="title"><i class="fa fa-newspaper-o"></i> Subscription form</h4>
            </div>
            <!--Body-->
            <div class="modal-body mb-0">

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input 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 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">Submit <i class="fa fa-check ml-1"></i></button>
                </div>

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

                                            
                                        

Login with Avatar Form

                                            

<!--Modal: Login with Avatar Form-->
<div 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 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">Login <i class="fa fa-sign-in ml-1"></i></button>
                </div>
            </div>

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

                                            
                                        

Login Form

                                            

<!--Modal: Login Form-->
<div 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">
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="title"><i class="fa fa-user"></i> Log in</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input 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 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">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 waves-effect ml-auto" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login Form-->

                                            
                                        

Register Form

                                            

<!--Modal: Register Form-->
<div 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">
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="title"><i class="fa fa-user-plus"></i> Register</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input 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 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 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">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 waves-effect ml-auto" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></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. 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? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget.

                                        

$('#exampleModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
})

                                        
                                    
                                        

<div class="bd-example">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
    <div 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">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="md-form">
                            <input type="text" class="form-control" id="recipient-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" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send message</button>
                </div>
            </div>
        </div>
    </div>
</div>

                                        
                                    

Remove animation

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

                                        

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>

                                        
                                    

Dynamic heights

If the height of a modal changes while it is open, you should call $('#myModal').data('bs.modal').handleUpdate() to readjust the modal’s position in case a scrollbar appears.

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

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

Advanced usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

                                        

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

                                        
                                    

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

                                        

$('#myModal').modal(options)

                                        
                                    

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name Type Default Description
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

                                        
$('#myModal').modal({
keyboard: false
})
                                        
                                    

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

                                        
$('#myModal').modal('toggle')
                                        
                                    

.modal('show')

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

                                        
$('#myModal').modal('show')
                                        
                                    

.modal('hide')

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

                                        
$('#myModal').modal('hide')
                                        
                                    

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
                                        

$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})

                                        
                                    

Automation and Scoring System

Apart from button click you can launch your modal on many automated ways.

By using triggers like Conditions, Scoring or Labels you can greatly improve User Experience.

You can implement all of these functionalities by using free tool "BrandFlow" created by our developers.

BrandFlow lets you manage your modals, handle conditions, create your own scoring and label system.

Learn More About BrandFlow Start Tutorial

Conditions

Conditions are the most fundamental triggers which let you handle your modals in more sophisticated way than just a button click (which is a standard Bootstrap functionality).

To apply Condition as a trigger you need to use one of the following Variables together with Operator and assign a Value.

    VARIABLES

  1. Click ID

  2. Click Class

  3. Page Path

  4. Form Submission

  5. Scroll Page %

  6. Scroll ID %

  7. Scroll Class %

  8. Delay Time

  9. Innactive Time

  10. Referrer

  11. UTM Tag

    OPERATORS

  1. equals

  2. does not equal

  3. contains

  4. does not contain

  5. starts with

  6. ends with

  7. greater than

  8. greater than or equal to

  9. less than

  10. less than or equal to

EXAMPLES OF USE


If you want to launch your "Welcome Modal" only on specific page and only if user scroll at least 60% of page you set a following condition:

If page path equals https://yourwebsite.com/

& scroll page % greater than 60%

then launch Welcome Modal


If you want to launch your "Discount Modal" only if visitor came to your website from other specific website (for example from Blog, where you have bought sponsored post for your product) you set a following condition:

If refferer equals https://otherwebsite.com/

then launch Modal with 10% discount coupon


Scoring

Scoring system is a basic mechanism allowing to adjust content on the webpage according to visitors needs.

In a nutshell - for each meaning activity, a user is collecting scores, which allows measuring his engagement. Once a certain threshold is reached - system triggers actions adjusted to user engagement level.

You can create your own Scoring Type our use our predefined templates: Scoring Standard and Scoring Pro.

SCORING STANDARD

Start counting when:

- User first time visits your website


Set 1 point to the User every time he visits a new page on your website.


OR Set 10 point to the User if he spent at least 15 minutes on your website


OR Set 5 point to the User if he share on Facebook your website

SCORING PRO

Start counting when:

- User visited your Pricing Page


Set 5 point to the User if he scrolled your Pricing Page at least to the 70% of its length


OR Set 15 point to the User if he spent at least 3 minutes on your Pricing Page

EXAMPLES OF USE


If user gained 20 points of Scoring Standard display him a Modal with Subscription Form to encourage him to subscripe to your newsletter.


If user gained 25 points of Scoring Pro and didn't proceed to checkout, display him a Modal with a 10% discount to convince him to buy your product.


Labels

Labels are the most advanced triggers and they can be constructed of conditions and scoring.

To use Label firstly you need to create it and define its name and conditions. Take a look at examples below:

ENGAGED USER

Set a label Engaged User to the visitor if he:


Gained 50 points of Scoring Standard


AND Come back to your website at least 10 times


AND Share your content on social media at least 3 times

POTENTIAL CUSTOMER

Set a label Potential Customer to the visitor if he:


Gained 30 points of Scoring Pro


AND Subscribe to your "special offers" newsletter


AND Downloaded free version of your product

EXAMPLES OF USE


If user gained a label Engaged User display him a Modal with Registration Form to encourage him to register on your website. That can help to engage him even more and in the future he can become "evangelist" of your project or customer.


If user gained a label Potential Customer send him an email asking how you can help him and what would convince him to buy your product.

Analytics

You won't create a great project with perfectly suited UI and you won't provide excellent User Experience if you don't measure results of your decisions and improvements.

You really need to learn how your users behave and how they interact with your UI. There is no excuse for belittling analytics.


You can measure users interactions with your UI on 2 levels: Basic and Advanced.

Both of them can be implemented by using software created by our developers - BrandFlow.

Learn More About BrandFlow Start Tutorial

Basic Analytics

You can measure the effectiveness of your automation by counting clicks on the elements included in Modal.

For example, you can measure how many times users clicked Start tutorial button comparing to clicks of No, thanks button.

You can measure any users' interactions with your UI.

Such a single interaction we call Event.

To create an Event you have to:

  1. Define its Action, for Example: "Start Tutorial Button Click"

  2. Define its trigger (condition), for example: Report an Event "Start Tutorial Button Click" if the user clicks the button with id = "abc".

To create Event you can use predefined Variables in BrandFlow Events' Creator. Then you can measure results in BrandFlow Analytics Dashboard.

    VARIABLES

  1. Click ID

  2. Click Class

  3. Page Path

  4. Form Submission

  5. Scroll Page %

  6. Scroll ID %

  7. Scroll Class %

  8. Delay Time

  9. Innactive Time

  10. Referrer

  11. UTM Tag

    OPERATORS

  1. equals

  2. does not equal

  3. contains

  4. does not contain

  5. starts with

  6. ends with

  7. greater than

  8. greater than or equal to

  9. less than

  10. less than or equal to

EXAMPLES OF USE


Report event Deep Scroll if Scroll Page % is greater than or equal to 80%


Report event Learn More Button Click if Click ID is equal to "learnMoreButton"


Report event Newsletter Subscription if Form Submission ID is equal to "subscriptionForm"

Advanced Analytics

More advanced analytics requires a special taxonomy.

If you want to receive a truly relevant and meaningful data you also need to define a context of the event.

The construction of well-defined event contains Category, Label and Action.

Event Category

It's a name assigned to the group of similar events. For example:

  1. Scoring Basic events

  2. Home Page clickability

  3. Tutorial engagement

Event Label

It's a name assigned to the UI element whose users' interaction you want to track. Examples:

  1. Welcome Modal

  2. Side Navigation

  3. Tutorial Introduction

Event Action

It's an actual users interaction. For Example:

  1. Learn More Click

  2. Call to Action Button

  3. Deep Page Scroll

To implement advanced event tracking use BrandFlow.

Subscription

This is an example of subscription form. It looks nice, but the problem is, right now it doesn't collect any data. It's static.

If you want to make it work you need to create the entire infrastructure with database and custom scripts.

Or you can use our free tool "BrandFlow" and with few click make it start collecting any data you whish.

Learn more in BrandFlow Tutorial.