Minimalist & Flexible jQuery Modal Plugin - jqModal

File Size: 21.5 KB
Views Total: 6622
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist & Flexible jQuery Modal Plugin - jqModal

jqModal is a Minimalist & Flexible plugin for jquery to create dialog boxes, notification boxes, and modal windows in your web page. It is Designer Frieldly so that you can customize the plugin using CSS and html. It also supports ajax content, Multiple Modal, Modal in Modal.

Basic Usage:

1. Include jQuery Library and jqModal.js

<script src=""></script>
<script src="jqModal.js"></script>

2. Include jqModal CSS

<link href="jqModal.css" rel="stylesheet" type="text/css">

3. Markup

<a href="#" class="jqModal">View</a>

<div class="jqmWindow" id="dialog"> <a href="#" class="jqmClose">Close</a>
...Your Content

4. Call the function

$().ready(function() {

5. Default options.

$().ready(function() {
// [0-100] Translucency percentage (opacity) of the body covering overlay. 
// Set to 0 for NO overlay, and up to 100 for a 100% opaque overlay.  
overlay: 50, 

// Applied to the body covering overlay. 
// Useful for controlling overlay look (tint, background-image, &c) with CSS.
overlayClass: 'jqmOverlay', 

//  Children of the modal element matching `closeClass` will fire the onHide event (to close the modal).
closeClass: 'jqmClose', 

// Close on ESC key.
closeOnEsc: false,

// Matching elements will fire the onShow event (to display the modal). 
// Trigger can be a selector String, 
// a jQuery collection of elements, a DOM element, or a False boolean.
trigger: '.jqModal', 

// URL to load content from via an AJAX request. 
// False to disable ajax. 
// If ajax begins with a "@", the URL is extracted from the attribute of the triggering element 
// (e.g. use '@data-url' for; <a href="#" class="jqModal" data-url="modal.html">...) 
ajax: false, 

// Children of the modal element to load the ajax response into. 
// If false, modal content will be overwritten by ajax response. Useful for retaining modal design.  
// Target may be a selector string, jQuery collection of elements, or a DOM element -- 
// and MUST exist as a child of the modal element.
target: false, 

// Text shown while waiting for ajax return. 
// Replaces HTML content of `target` element.
ajaxText: '', 

// If true, user interactivity will be locked to the modal window until closed.
modal: false, 

// If true, modal will be posistioned as a first child of the BODY element when opened, 
// and its DOM posistion restored when closed. 
// Useful for overcoming z-Index container issues.
toTop: false, 

// User defined callback function fired when modal opened.
onShow: onShow, 

// User defined callback function fired when modal closed.
onHide: onHide, 

// User defined callback function fired when ajax content loads.
onLoad: false

Change logs:

v1.4.2 (2016-04-16)

  • restore parsing and assigning closeClass behavior in ajax loaded content

v1.4.0 (2015-08-17)

  • new convention: use 'e' for event, 'm' for modal element, 80 cols max.
  • preventDefault to cancel click behavior in trigger functions
  • strict javascript linting

v1.3.0 (2015-04-16)

  • immediately show ajax modals

v1.2.1 (2015-04-02)

  • fix: allow focus in active modals
  • improve example, include modal:true demo

v1.2.0 (2015-02-27)

  • new: pass event to $.jqm.focusFunc
  • fix: pass active modal DOM object to $.jqm.focusFunc

v1.1.0 (2014-09-03)

  • allow modification of a signle option with subsequent $.jqm() calls -- do not extend with default $.jqm.params.
  • simplify addTrigger method and ensure subsequent calls don't append additional click events to triggers.

v1.0.3 (2014-07-02)

  • subsequent calls to $.jqm() extend options as expected - thanks @earbash
  • added ajax and option overriding to examples

v1.0.2 (2014-04-10)

  • fixed registration / jQuery NoConflict

v1.0.1 (2014-03-28)

  • strict mode fix 

v1.0.0 (2014-01-30)

This awesome jQuery plugin is developed by briceburg. For more Advanced Usages, please check the demo page or visit the official website.