1. Installation

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<script src="modaljs/assets/dist/index.bundle.js"></script>
<link rel="stylesheet" href="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.

<div id="custom-id">
    <div class="mdl_content">
        <!-- Content goes here -->
    </div>
</div>

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.

<div id="modal-element">
    <div class="mdl_content">
        <!-- Content goes here -->
    </div>
</div>

3. Modal Button

If you want the modal to open with a button you can add a div with class “open_mdl_btn”.

<div id="modal-element">
    <div class="open_mdl_btn">OPEN POPUP</div>
    <div class="mdl_content">
        <!-- Content goes here -->
    </div>
</div>

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.

$("#modal-element").modalJS();

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.