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.
JavaScript
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

Files

Permalink
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
CHANGELOG.md 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
README.md 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

README.md

jqModal

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.

Features

  • 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+

Usage

markup

<a
  class="button"
  data-modal="{{ video_id }}" href="$//www.youtube.com/embed/{{ video_id }}">
  Watch</a>

<div class="modal-dialog modal-video" data-modal="{{ video_id }}">
  <iframe
    width="560"
    height="315"
    src="//www.youtube.com/embed/{{ video_id }}"
    frameborder="0"
    allowfullscreen></iframe>
</div>

script

$('div.modal-dialog').each(function(){

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

  $(this).jqm({
    toTop: true,
    trigger: trigger
  });

});

styling

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 http://jquery.iceburg.net/jqModal

See Examples / Demonstration

Development

Development of jqModal occurs in the -master branch on jqModal.js. The CHANGELOG.md 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.

Author

Brice Burgess @iceburgBrice

Released under the MIT License: http://www.opensource.org/licenses/mit-license.php

You can’t perform that action at this time.