jquery.easyModal.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /**
  2. * easyModal.js v1.3.2
  3. * A minimal jQuery modal that works with your CSS.
  4. * Author: Flavius Matis - http://flaviusmatis.github.com/
  5. * URL: https://github.com/flaviusmatis/easyModal.js
  6. *
  7. * Copyright 2012, Flavius Matis
  8. * Released under the MIT license.
  9. * http://flaviusmatis.github.com/license.html
  10. */
  11. /*jslint browser: true*/
  12. /*global jQuery*/
  13. (function($,sr){
  14. // debouncing function from John Hann
  15. // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  16. var debounce = function (func, threshold, execAsap) {
  17. var timeout;
  18. return function debounced () {
  19. var obj = this, args = arguments;
  20. function delayed () {
  21. if (!execAsap)
  22. func.apply(obj, args);
  23. timeout = null;
  24. };
  25. if (timeout)
  26. clearTimeout(timeout);
  27. else if (execAsap)
  28. func.apply(obj, args);
  29. timeout = setTimeout(delayed, threshold || 100);
  30. };
  31. }
  32. // smartModalResize
  33. jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
  34. })(jQuery,'smartModalResize');
  35. (function ($) {
  36. "use strict";
  37. var methods = {
  38. init: function (options) {
  39. var defaults = {
  40. top: 'auto',
  41. left: 'auto',
  42. autoOpen: false,
  43. overlayOpacity: 0.5,
  44. overlayColor: '#000',
  45. overlayClose: true,
  46. overlayParent: 'body',
  47. closeOnEscape: true,
  48. closeButtonClass: '.close',
  49. transitionIn: '',
  50. transitionOut: '',
  51. onOpen: false,
  52. onClose: false,
  53. zIndex: function () {
  54. return (function (value) {
  55. return value === -Infinity ? 0 : value + 1;
  56. }(Math.max.apply(Math, $.makeArray($('*').map(function () {
  57. return $(this).css('z-index');
  58. }).filter(function () {
  59. return $.isNumeric(this);
  60. }).map(function () {
  61. return parseInt(this, 10);
  62. })))));
  63. },
  64. updateZIndexOnOpen: true,
  65. hasVariableWidth: false
  66. };
  67. options = $.extend(defaults, options);
  68. return this.each(function () {
  69. var o = options,
  70. $overlay = $('<div class="lean-overlay"></div>'),
  71. $modal = $(this);
  72. $overlay.css({
  73. 'display': 'none',
  74. 'position': 'fixed',
  75. // When updateZIndexOnOpen is set to true, we avoid computing the z-index on initialization,
  76. // because the value would be replaced when opening the modal.
  77. 'z-index': (o.updateZIndexOnOpen ? 0 : o.zIndex()),
  78. 'top': 0,
  79. 'left': 0,
  80. 'height': '100%',
  81. 'width': '100%',
  82. 'background': o.overlayColor,
  83. 'opacity': o.overlayOpacity,
  84. 'overflow': 'auto'
  85. }).appendTo(o.overlayParent);
  86. $modal.css({
  87. 'display': 'none',
  88. 'position' : 'fixed',
  89. // When updateZIndexOnOpen is set to true, we avoid computing the z-index on initialization,
  90. // because the value would be replaced when opening the modal.
  91. 'z-index': (o.updateZIndexOnOpen ? 0 : o.zIndex() + 1),
  92. 'left' : parseInt(o.left, 10) > -1 ? o.left + 'px' : 50 + '%',
  93. 'top' : parseInt(o.top, 10) > -1 ? o.top + 'px' : 50 + '%'
  94. });
  95. $modal.bind('openModal', function () {
  96. var overlayZ = o.updateZIndexOnOpen ? o.zIndex() : parseInt($overlay.css('z-index'), 10),
  97. modalZ = overlayZ + 1;
  98. if(o.transitionIn !== '' && o.transitionOut !== ''){
  99. $modal.removeClass(o.transitionOut).addClass(o.transitionIn);
  100. }
  101. $modal.css({
  102. 'display' : 'block',
  103. 'margin-left' : (parseInt(o.left, 10) > -1 ? 0 : -($modal.outerWidth() / 2)) + 'px',
  104. 'margin-top' : (parseInt(o.top, 10) > -1 ? 0 : -($modal.outerHeight() / 2)) + 'px',
  105. 'z-index': modalZ
  106. });
  107. $overlay.css({'z-index': overlayZ, 'display': 'block'});
  108. if (o.onOpen && typeof o.onOpen === 'function') {
  109. // onOpen callback receives as argument the modal window
  110. o.onOpen($modal[0]);
  111. }
  112. });
  113. $modal.bind('closeModal', function () {
  114. if(o.transitionIn !== '' && o.transitionOut !== ''){
  115. $modal.removeClass(o.transitionIn).addClass(o.transitionOut);
  116. $modal.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  117. $modal.css('display', 'none');
  118. $overlay.css('display', 'none');
  119. });
  120. }
  121. else {
  122. $modal.css('display', 'none');
  123. $overlay.css('display', 'none');
  124. }
  125. if (o.onClose && typeof o.onClose === 'function') {
  126. // onClose callback receives as argument the modal window
  127. o.onClose($modal[0]);
  128. }
  129. });
  130. // Close on overlay click
  131. $overlay.click(function () {
  132. if (o.overlayClose) {
  133. $modal.trigger('closeModal');
  134. }
  135. });
  136. $(document).keydown(function (e) {
  137. // ESCAPE key pressed
  138. if (o.closeOnEscape && e.keyCode === 27) {
  139. $modal.trigger('closeModal');
  140. }
  141. });
  142. $(window).smartModalResize(function(){
  143. if (o.hasVariableWidth) {
  144. $modal.css({
  145. 'margin-left' : (parseInt(o.left, 10) > -1 ? 0 : -($modal.outerWidth() / 2)) + 'px',
  146. 'margin-top' : (parseInt(o.top, 10) > -1 ? 0 : -($modal.outerHeight() / 2)) + 'px'
  147. });
  148. }
  149. });
  150. // Close when button pressed
  151. $modal.on('click', o.closeButtonClass, function (e) {
  152. $modal.trigger('closeModal');
  153. e.preventDefault();
  154. });
  155. // Automatically open modal if option set
  156. if (o.autoOpen) {
  157. $modal.trigger('openModal');
  158. }
  159. });
  160. }
  161. };
  162. $.fn.easyModal = function (method) {
  163. // Method calling logic
  164. if (methods[method]) {
  165. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  166. }
  167. if (typeof method === 'object' || !method) {
  168. return methods.init.apply(this, arguments);
  169. }
  170. $.error('Method ' + method + ' does not exist on jQuery.easyModal');
  171. };
  172. }(jQuery));