ModalKit is an easy way to generate and display standardized modals on the fly.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
templates
.gitignore
LICENSE
ModalKit_Logo.png
README.md
SUPPORT.md
modalkit.js

README.md

ModalKit

ModalKit is an easy way to generate and display standardized modals on the fly.

codebeat badge Codacy Badge

Buy Me A Coffee

Like ModalKit? Buy me a coffee (or two, I’ll drink them both).

Features

  • Dynamic Modal Generation - Modals can be generated without having to include modal-specific markup.
  • Template System - Predefine modal templates, and ModalKit will fill in the provided data in the template when called.
  • Modal Time-out - Set modals up to dismiss themselves after a specified amount of time.

Installation

To install ModalKit, download the release files or clone the repository within your project files, and link all dependencies, modal templates, and the ModalKit library in your document. Please note that for the template system to work properly, you must link your template files first (see example below).

Example of File Linking with Two Modal Templates

...

<!-- ModalKit Templates -->
<script src="templates/default.modal"></script>
<script src="templates/advanced.modal"></script>

<!-- ModalKit Library -->
<script src="../modalkit.js"></script>

...

Dependencies

Usage

To use ModalKit, associate JavaScript events with calls to showModal(), passing along data required by the modal template as specified in the function’s documentation.

Default Template Example - Show Modal on Document Ready

$(document).ready(function() {
  showModal({
    title: "Hello",
    body: "This is a sample modal created by ModalKit."
  });
});

API/Functional Documentation

showModal(data, [templateSource], [timeout])

showModal() displays a modal using a standard modal template, using the data passed through the function to populate fields in the modal, and the optional templateSource and timeout parameters to select the modal template and timeout time.

data Parameter

The data parameter accepts JSON with the values to inject into a modal. The length and information provided is dependent on the fields to fill in the template. In the default template, the template requires a content for title and body.

Default Template Example
showModal({
	title: "Hello",
	body: "This is a sample modal created by ModalKit."
});

templateSource Parameter (Optional)

The templateSource parameter is an optional parameter which is used to pass the source markup for a modal template. Though it is recommended to store this source as a variable and pass the variable through the showModal() call, it is also possible to pass a String with the markup inline. If no value is specified for this parameter, the default modal template will be used.

timeout Parameter (Optional)

The timeout parameter is an optional parameter used to specify a timeout time for a given modal, measured in milliseconds. This value is passed as an integer, and when the timeout time is reached, the modal will dismiss itself and be deleted from the DOM.

deleteModal(evt)

deleteModal() deletes a modal from the DOM. The function accepts an event (as the evt parameter), which the function uses to determine the specific modal to target and remove.