jquery.reveal.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /*
  2. * jQuery Reveal Plugin 1.0
  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. (function ($) {
  9. $('a[data-reveal-id]').live('click', function (event) {
  10. event.preventDefault();
  11. var modalLocation = $(this).attr('data-reveal-id');
  12. $('#' + modalLocation).reveal($(this).data());
  13. });
  14. $.fn.reveal = function (options) {
  15. var defaults = {
  16. animation: 'fadeAndPop', // fade, fadeAndPop, none
  17. animationSpeed: 300, // how fast animtions are
  18. closeOnBackgroundClick: true, // if you click background will modal close?
  19. dismissModalClass: 'close-reveal-modal' // the class of a button or element that will close an open modal
  20. };
  21. var options = $.extend({}, defaults, options);
  22. return this.each(function () {
  23. var modal = $(this),
  24. topMeasure = parseInt(modal.css('top')),
  25. topOffset = modal.height() + topMeasure,
  26. locked = false,
  27. modalBg = $('.reveal-modal-bg');
  28. if (modalBg.length == 0) {
  29. modalBg = $('<div class="reveal-modal-bg" />').insertAfter(modal);
  30. modalBg.fadeTo('fast', 0.8);
  31. }
  32. function openAnimation() {
  33. modalBg.unbind('click.modalEvent');
  34. $('.' + options.dismissModalClass).unbind('click.modalEvent');
  35. if (!locked) {
  36. lockModal();
  37. if (options.animation == "fadeAndPop") {
  38. modal.css({'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible'});
  39. modalBg.fadeIn(options.animationSpeed / 2);
  40. modal.delay(options.animationSpeed / 2).animate({
  41. "top": $(document).scrollTop() + topMeasure + 'px',
  42. "opacity": 1
  43. }, options.animationSpeed, unlockModal);
  44. }
  45. if (options.animation == "fade") {
  46. modal.css({'opacity': 0, 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure});
  47. modalBg.fadeIn(options.animationSpeed / 2);
  48. modal.delay(options.animationSpeed / 2).animate({
  49. "opacity": 1
  50. }, options.animationSpeed, unlockModal);
  51. }
  52. if (options.animation == "none") {
  53. modal.css({'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure});
  54. modalBg.css({"display": "block"});
  55. unlockModal();
  56. }
  57. }
  58. modal.unbind('reveal:open', openAnimation);
  59. }
  60. modal.bind('reveal:open', openAnimation);
  61. function closeAnimation() {
  62. if (!locked) {
  63. lockModal();
  64. if (options.animation == "fadeAndPop") {
  65. modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed);
  66. modal.animate({
  67. "top": $(document).scrollTop() - topOffset + 'px',
  68. "opacity": 0
  69. }, options.animationSpeed / 2, function () {
  70. modal.css({'top': topMeasure, 'opacity': 1, 'visibility': 'hidden'});
  71. unlockModal();
  72. });
  73. }
  74. if (options.animation == "fade") {
  75. modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed);
  76. modal.animate({
  77. "opacity" : 0
  78. }, options.animationSpeed, function () {
  79. modal.css({'opacity': 1, 'visibility': 'hidden', 'top': topMeasure});
  80. unlockModal();
  81. });
  82. }
  83. if (options.animation == "none") {
  84. modal.css({'visibility': 'hidden', 'top': topMeasure});
  85. modalBg.css({'display': 'none'});
  86. }
  87. }
  88. modal.unbind('reveal:close', closeAnimation);
  89. }
  90. modal.bind('reveal:close', closeAnimation);
  91. modal.trigger('reveal:open');
  92. var closeButton = $('.' + options.dismissModalClass).bind('click.modalEvent', function () {
  93. modal.trigger('reveal:close');
  94. });
  95. if (options.closeOnBackgroundClick) {
  96. modalBg.css({"cursor": "pointer"});
  97. modalBg.bind('click.modalEvent', function () {
  98. modal.trigger('reveal:close');
  99. });
  100. }
  101. $('body').keyup(function (event) {
  102. if (event.which === 27) { // 27 is the keycode for the Escape key
  103. modal.trigger('reveal:close');
  104. }
  105. });
  106. function unlockModal() {
  107. locked = false;
  108. }
  109. function lockModal() {
  110. locked = true;
  111. }
  112. });
  113. };
  114. })(jQuery);