Skip to content
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.
Branch: master
Clone or download

Latest commit

briceburg Merge pull request #27 from Hooter/patch-1
Update package.json for support TypeScript
Latest commit a6d2411 Sep 16, 2016


Type Name Latest commit message Commit time
Failed to load latest commit information.
examples add closeClass to ajax loaded example content Apr 16, 2016
.gitignore ignore hinting uglified JS Aug 17, 2015
.travis.yml Create .travis.yml Jun 8, 2015 v1.4.2 +r27 release Apr 16, 2016
GPL-LICENSE.txt r17 release Jan 30, 2014
MIT-LICENSE.txt completed rewrite, add previous releases and examples Jan 29, 2014 v1.4.2 +r27 release Apr 16, 2016
jqModal.d.ts Create jqModal.d.ts for support TypeScript (#26) Sep 16, 2016
jqModal.js v1.4.2 +r27 release Apr 16, 2016
jqModal.min.js v1.4.2 +r27 release Apr 16, 2016
package.json Update package.json Sep 16, 2016


jqModal is a plugin for jQuery to help you display modals, popups, and notices. It is flexible and tiny, akin to a "Swiss Army Knife", and provides a great base for your windowing needs.


  • Designer Frieldly - Use your HTML+CSS for Layout and Styling
  • Translator/i18n friendly - No hardcoded English strings
  • Developer friendly - Extensible through callbacks to make anything possible (gallery slideshows, video-conferencing, &c)
  • Simple support for remotely loaded content (aka "ajax")
  • Multiple Modals per page (including nested Modal-in-Modal)
  • Supported by all browsers capable of running jQuery 1.2.3+



  data-modal="{{ video_id }}" href="$//{{ video_id }}">

<div class="modal-dialog modal-video" data-modal="{{ video_id }}">
    src="//{{ video_id }}"



  var modal_id = || $(this).data('modal');
  var trigger = $('a.modal-trigger[data-modal="' + modal_id + '"]');

    toTop: true,
    trigger: trigger



div.modal-dialog {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -288px;
    padding: 6px 0;
    position: fixed;
    text-align: center;
    top: 17%;
    width: 576px;
    background: #FFF;

div.modal-dialog.modal-video {
  background-color: transparent;

div.jqmOverlay {
    /* background-color: #FFF; */ /* lighten background */
    background-color: #000; /* darken background */

Read the documenttion and more at

See Examples / Demonstration


Development of jqModal occurs in the -master branch on jqModal.js. The is to be kept up to date with changes.

Release Process

  • Version jqModal.js header <semver> (YYYY.MM.DD +r<revision>)
    • Update package.json, bumping version
  • Ensure changelog is up to date
  • Tag with : git tag <semver> && git push origin --tags to publish.
    • add release notes via github interface
  • npm publish ./

Get Involved

Report issues to the github issue tracker.

For support, please post to stackoverflow using the jqmodal tag:

The jqModal website code is available on github -- please do contribute improvements.


Brice Burgess @iceburgBrice

Released under the MIT License:

You can’t perform that action at this time.