2. Distributen files can be found in the “dist” folder. Add the following files to your page:
Add the basic modal structure to your page. The structure requires one class “mdl_content” and it’s parent should have a unique custom ID.
The custom ID is required to set optional modal cookies and it’s the ID we will use to create the actual modal.
Option 1: The content can be added to the div with class “mdl_content”.
Option 2: External content files can be loaded via ajax. Have alook at the Ajax content demo page.
3. Modal Button
If you want the modal to open with a button you can add a div with class “open_mdl_btn”.
4. Creating the Modal
The modal can be loaded on any object by applying the modalJS jQuery plugin.
To get you started we created this awesome modal builder.
Attribute | Type | Default | Options | Description |
---|---|---|---|---|
type | String | modal | modal inline |
Defines the modal type. |
insert | JSON | {} |
target: string: .object
where: string: before | after
|
To position the modal on the page. Only used for inline modals |
position | Array | [] |
0: string: left | center | right
1: string: top | middle | bottom
|
To position the modal on the page. Only used for inline modals |
height | String | fit-content | The height of the modal | |
width | String | fit-content | The width of the modal | |
css | JSON | {} | key: string: value |
Custom CSS to add to the modal container (.mdl_container) |
overlay_color | String | null | The background color for the overlay. | |
close_btn | JSON | {} |
package: string: default | top_bar
position: string: left | right
delay: int
style: JSON key:value
container: JSON style JSON key:value
|
The close button options. |
animatedIn | String | zoomIn | ||
animatedOut | String | zoomOut | ||
trigger | JSON | null | ||
disable_window_scroll | Bool | 1 | 1 0 |
Disable the page scroll when modal is active. |
bg_color | String | 1 0 |
Modal background color. | |
overflow | String | auto |
auto
visible
hidden
|
Make the modal scrollable or not. |
auto_close | JSON | null | ||
auto_close_progress | Bool | 1 | 1 0 |
Show progress bar when modal has auto close function. |
auto_close_progress_color | String | #009ACF | Auto closse progress bar background color. | |
cookie | JSON | {} |
type: string: day | minute
expires: int
|
Set cookie options for modal. |
hide_on | JSON | {} |
type: string: mobile | desktop
platform: string mac | win | android | ipad | iphone
name: string mozilla | chrome | safari | msie
version: int
|
Show/Hide modal for specific devices. |