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
briceburg Merge pull request #27 from Hooter/patch-1
Update package.json for support TypeScript
Latest commit a6d2411 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.