Modals | DashLite Admin Template

Components

## Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

#### Base Examples

Following are basic example of modals, just toggle a working modal demo by clicking the buttons below.

Class Reference | Details
--- | ---
`.modal-{sm|lg|xl}` | Use with `.modal-dialog` for modal size. eg. `<div class="modal-dialog modal-lg">...`...`</div>`
`.modal-dialog-{top|bottom}` | Use with `.modal-dialog` for modal position. eg. `<div class="modal-dialog modal-dialog-top">...`...`</div>`
`.modal-body-{sm|md|lg}` | Use with `.modal-body` for modal inside gap. eg. `<div class="modal-body modal-body-lg">...`...`</div>`
`.zoom` | Use with `.modal` for zoom effect. eg. `<div class="modal fade zoom">`...`</div>`
Additionaly supported `.modal-header-sm` for `.modal-header` & `.modal-footer-sm` for `.modal-footer` class.

###### Code Example

    <!-- Modal Trigger Code -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDefault">Modal Default</button>

    <!-- Modal Content Code -->
    <div class="modal fade" tabindex="-1" id="modalDefault">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
                <div class="modal-header">
                    <h5 class="modal-title">Modal Title</h5>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.</p>
                </div>
                <div class="modal-footer bg-light">
                    <span class="sub-text">Modal Footer Text</span>
                </div>
            </div>
        </div>
    </div>

#### Use-case Modal

Some use-case example of modals that helps in develop your projects.

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State

##### Modal Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.

##### Modal Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.

##### Modal Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.

##### Modal Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.

##### Modal Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.

##### Modal Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.

##### Customer Info

Full Name
Email address
Phone No
Communication

- Email
- SMS
- Phone

Amount

#### Update Profile

###### Tab Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro numquam distinctio ab cupiditate veniam a aperiam architecto perspiciatis quidem provident!

Debitis ullam impedit, dolore architecto porro doloremque eum magni dolorum.

###### Another Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro numquam distinctio ab cupiditate veniam a aperiam architecto perspiciatis quidem provident!

Debitis ullam impedit, dolore architecto porro doloremque eum magni dolorum.

#### Congratulations!

You’ve successfully bought 0.5968 BTC for 200.00 USD
Learn when you reciveve bitcoin in your wallet. Click here
OK

#### Unable to Process!

We are sorry, we were unable to process your payment. Please try after sometimes.

If you need help please contact us at (855) 485-7373.

Return