Have you seen the awesome, brand new modal builder yet?
Modal Builder Try it Now
We use cookies to offer you a better browsing experience. If you continue to use this site, you consent to our use of cookies.
We use cookies to offer you a better browsing experience. If you continue to use this site, you consent to our use of cookies.

1. Installation

1. Make sure you have jQuery running on your page.

2. Distributen files can be found in the “dist” folder. Add the following files to your page:

  • modaljs/assets/dist/index.bundle.js
  • modaljs/assets/dist/index.bundle.js.css

2. Usage

1. The Element:

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.

2. The Content

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.

3. Attributes

Each modal can be customized by using the attributes.
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.