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