Basics

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

Default
Long content
Minimal
Position
Background image
Sizes

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.