jquery.reveal.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. /*
  2. * jQuery Reveal Plugin 1.1
  3. * www.ZURB.com
  4. * Copyright 2010, ZURB
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. */
  8. /*globals jQuery */
  9. (function ($) {
  10. 'use strict';
  11. var modalQueued = false;
  12. $('a[data-reveal-id]').live('click', function (event) {
  13. event.preventDefault();
  14. var modalLocation = $(this).attr('data-reveal-id');
  15. $('#' + modalLocation).reveal($(this).data());
  16. });
  17. $.fn.reveal = function (options) {
  18. var defaults = {
  19. animation: 'fadeAndPop', // fade, fadeAndPop, none
  20. animationSpeed: 300, // how fast animtions are
  21. closeOnBackgroundClick: true, // if you click background will modal close?
  22. dismissModalClass: 'close-reveal-modal', // the class of a button or element that will close an open modal
  23. open: $.noop,
  24. opened: $.noop,
  25. close: $.noop,
  26. closed: $.noop
  27. };
  28. options = $.extend({}, defaults, options);
  29. return this.each(function () {
  30. var modal = $(this),
  31. topMeasure = parseInt(modal.css('top'), 10),
  32. topOffset = modal.height() + topMeasure,
  33. locked = false,
  34. modalBg = $('.reveal-modal-bg'),
  35. closeButton;
  36. if (modalBg.length === 0) {
  37. modalBg = $('<div class="reveal-modal-bg" />').insertAfter(modal);
  38. modalBg.fadeTo('fast', 0.8);
  39. }
  40. function unlockModal() {
  41. locked = false;
  42. }
  43. function lockModal() {
  44. locked = true;
  45. }
  46. function closeOpenModals(modal) {
  47. var openModals = $(".reveal-modal.open");
  48. if (openModals.length === 1) {
  49. modalQueued = true;
  50. $(".reveal-modal.open").trigger("reveal:close");
  51. }
  52. }
  53. function openAnimation() {
  54. if (!locked) {
  55. lockModal();
  56. closeOpenModals(modal);
  57. modal.addClass("open");
  58. if (options.animation === "fadeAndPop") {
  59. modal.css({'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible', 'display' : 'block'});
  60. modalBg.fadeIn(options.animationSpeed / 2);
  61. modal.delay(options.animationSpeed / 2).animate({
  62. "top": $(document).scrollTop() + topMeasure + 'px',
  63. "opacity": 1
  64. }, options.animationSpeed, function () {
  65. modal.trigger('reveal:opened');
  66. });
  67. }
  68. if (options.animation === "fade") {
  69. modal.css({'opacity': 0, 'visibility': 'visible', 'display' : 'block', 'top': $(document).scrollTop() + topMeasure});
  70. modalBg.fadeIn(options.animationSpeed / 2);
  71. modal.delay(options.animationSpeed / 2).animate({
  72. "opacity": 1
  73. }, options.animationSpeed, function () {
  74. modal.trigger('reveal:opened');
  75. });
  76. }
  77. if (options.animation === "none") {
  78. modal.css({'visibility': 'visible', 'display' : 'block', 'top': $(document).scrollTop() + topMeasure});
  79. modalBg.css({"display": "block"});
  80. modal.trigger('reveal:opened');
  81. }
  82. }
  83. }
  84. modal.bind('reveal:open.reveal', openAnimation);
  85. function closeAnimation() {
  86. if (!locked) {
  87. lockModal();
  88. modal.removeClass("open");
  89. if (options.animation === "fadeAndPop") {
  90. modal.animate({
  91. "top": $(document).scrollTop() - topOffset + 'px',
  92. "opacity": 0
  93. }, options.animationSpeed / 2, function () {
  94. modal.css({'top': topMeasure, 'opacity': 1, 'visibility': 'hidden', 'display': 'none'});
  95. });
  96. if (!modalQueued) {
  97. modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed, function () {
  98. modal.trigger('reveal:closed');
  99. });
  100. } else {
  101. modal.trigger('reveal:closed');
  102. }
  103. modalQueued = false;
  104. }
  105. if (options.animation === "fade") {
  106. modal.animate({
  107. "opacity" : 0
  108. }, options.animationSpeed, function () {
  109. modal.css({'opacity': 1, 'visibility': 'hidden', 'display' : 'none', 'top': topMeasure});
  110. });
  111. if (!modalQueued) {
  112. modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed, function () {
  113. modal.trigger('reveal:closed');
  114. });
  115. } else {
  116. modal.trigger('reveal:closed');
  117. }
  118. }
  119. if (options.animation === "none") {
  120. modal.css({'visibility': 'hidden', 'display' : 'block', 'top': topMeasure});
  121. if (!modalQueued) {
  122. modalBg.css({'display': 'none'});
  123. }
  124. modal.trigger('reveal:closed');
  125. }
  126. }
  127. }
  128. function destroy() {
  129. modal.unbind('.reveal');
  130. modalBg.unbind('.reveal');
  131. $('.' + options.dismissModalClass).unbind('.reveal');
  132. $('body').unbind('.reveal');
  133. }
  134. modal.bind('reveal:close.reveal', closeAnimation);
  135. modal.bind('reveal:opened.reveal reveal:closed.reveal', unlockModal);
  136. modal.bind('reveal:closed.reveal', destroy);
  137. modal.bind('reveal:open.reveal', options.open);
  138. modal.bind('reveal:opened.reveal', options.opened);
  139. modal.bind('reveal:close.reveal', options.close);
  140. modal.bind('reveal:closed.reveal', options.closed);
  141. modal.trigger('reveal:open');
  142. closeButton = $('.' + options.dismissModalClass).bind('click.reveal', function () {
  143. modal.trigger('reveal:close');
  144. });
  145. if (options.closeOnBackgroundClick) {
  146. modalBg.css({"cursor": "pointer"});
  147. modalBg.bind('click.reveal', function () {
  148. modal.trigger('reveal:close');
  149. });
  150. }
  151. $('body').bind('keyup.reveal', function (event) {
  152. if (event.which === 27) { // 27 is the keycode for the Escape key
  153. modal.trigger('reveal:close');
  154. }
  155. });
  156. });
  157. };
  158. } (jQuery));