## Basics

Some basic variations of a modals, positions, sizes and etc.

###### Default

###### Long content

###### Minimal

###### Position

###### Background image

###### Sizes

##### Modal title

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

##### Modal title

Please notice that this modal has `.modal-long` class name added to `.modal-dialog`.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

Modals are a great tool to display call to action contents. Mostly you want to use them for sale promotions, sign up to your application, newsletter subscription, etc.

Our template make it an easy task as well.

## Options

Our modals has some useful options such as auto show in page load or exit show.

#### Autoshow

A modal can be set to show once the page loads (like the one you saw on page load) with an optional delay time in milliseconds. For this purpose, simply add `data-autoshow="5000"` to your `.modal` element, so it'll display 5 seconds after the page load; like the one you saw in this page.

#### Exitshow

An exitshow modal is a modal that displays once the cursor left an element. For most cases, the element is `<body>` tag. To achieve this goal, simply add a `data-exitshow="selector"` to your modal element, which selector is a jQuery selector. For example, `data-exitshow="body"` will display your modal once the cursor leaves the <body> element. Also, you can have an optional data attribute of `data-delay="1000"` which add a delay in milliseconds before opening the modal dialog.

To make it more understandable, we have an example here. Simply move your cursor inside the following block and then exit from the area to see a modal after 1 second.

Please note that to not disturb visitors, exitshow is a one-time event.

### Autoshow modal

This is a sample of autoshow modal which displays on page load with a specified amount of delays. You can use autoshow modals to exhibit your special promotions.

### Exitshow modal

This is a sample of exitshow modal. You see this modal because you moved your cursor out of `#exitshow-target` element.