bootstrap-modal.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. /* ===========================================================
  2. * bootstrap-modal.js v2.2.4
  3. * ===========================================================
  4. * Copyright 2012 Jordan Schroter
  5. *
  6. * Licensed under the Apache License, Version 2.0 (the "License");
  7. * you may not use this file except in compliance with the License.
  8. * You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing, software
  13. * distributed under the License is distributed on an "AS IS" BASIS,
  14. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. * See the License for the specific language governing permissions and
  16. * limitations under the License.
  17. * ========================================================== */
  18. !function($) {
  19. "use strict";
  20. var Modal = function(element, options) {
  21. this.init(element, options);
  22. };
  23. Modal.prototype = {
  24. constructor: Modal,
  25. init: function(element, options) {
  26. var that = this;
  27. this.options = options;
  28. this.$element = $(element).delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this));
  29. this.options.remote && this.$element.find('.modal-body').load(this.options.remote,
  30. function() {
  31. var e = $.Event('loaded');
  32. that.$element.trigger(e);
  33. });
  34. var manager = typeof this.options.manager === 'function' ? this.options.manager.call(this) : this.options.manager;
  35. manager = manager.appendModal ? manager: $(manager).modalmanager().data('modalmanager');
  36. manager.appendModal(this);
  37. },
  38. toggle: function() {
  39. return this[!this.isShown ? 'show': 'hide']();
  40. },
  41. show: function() {
  42. var e = $.Event('show');
  43. if (this.isShown) return;
  44. this.$element.trigger(e);
  45. if (e.isDefaultPrevented()) return;
  46. this.escape();
  47. this.tab();
  48. this.options.loading && this.loading();
  49. },
  50. hide: function(e) {
  51. e && e.preventDefault();
  52. e = $.Event('hide');
  53. this.$element.trigger(e);
  54. if (!this.isShown || e.isDefaultPrevented()) return (this.isShown = false);
  55. this.isShown = false;
  56. this.escape();
  57. this.tab();
  58. this.isLoading && this.loading();
  59. $(document).off('focusin.modal');
  60. this.$element.removeClass('in').removeClass('animated').removeClass(this.options.attentionAnimation).removeClass('modal-overflow').attr('aria-hidden', true);
  61. $.support.transition && this.$element.hasClass('fade') ? this.hideWithTransition() : this.hideModal();
  62. },
  63. layout: function() {
  64. var prop = this.options.height ? 'height': 'max-height',
  65. value = this.options.height || this.options.maxHeight;
  66. if (this.options.width) {
  67. this.$element.css('width', this.options.width);
  68. var that = this;
  69. this.$element.css('margin-left',
  70. function() {
  71. if (/%/ig.test(that.options.width)) {
  72. return - (parseInt(that.options.width) / 2) + '%';
  73. } else {
  74. return - ($(this).width() / 2) + 'px';
  75. }
  76. });
  77. } else {
  78. this.$element.css('width', '');
  79. this.$element.css('margin-left', '');
  80. }
  81. this.$element.find('.modal-body').css('overflow', '').css(prop, '');
  82. if (value) {
  83. this.$element.find('.modal-body').css('overflow', 'auto').css(prop, value);
  84. }
  85. var modalOverflow = $(window).height() - 10 < this.$element.height();
  86. if (modalOverflow || this.options.modalOverflow) {
  87. this.$element.css('margin-top', 0).addClass('modal-overflow');
  88. } else {
  89. this.$element
  90. .css('margin-top', 0 - this.$element.height() / 2)
  91. .removeClass('modal-overflow');
  92. }
  93. },
  94. tab: function() {
  95. var that = this;
  96. if (this.isShown && this.options.consumeTab) {
  97. this.$element.on('keydown.tabindex.modal', '[data-tabindex]',
  98. function(e) {
  99. if (e.keyCode && e.keyCode == 9) {
  100. var $next = $(this),
  101. $rollover = $(this);
  102. that.$element.find('[data-tabindex]:enabled:not([readonly])').each(function(e) {
  103. if (!e.shiftKey) {
  104. $next = $next.data('tabindex') < $(this).data('tabindex') ? $next = $(this) : $rollover = $(this);
  105. } else {
  106. $next = $next.data('tabindex') > $(this).data('tabindex') ? $next = $(this) : $rollover = $(this);
  107. }
  108. });
  109. $next[0] !== $(this)[0] ? $next.focus() : $rollover.focus();
  110. e.preventDefault();
  111. }
  112. });
  113. } else if (!this.isShown) {
  114. this.$element.off('keydown.tabindex.modal');
  115. }
  116. },
  117. escape: function() {
  118. var that = this;
  119. if (this.isShown && this.options.keyboard) {
  120. if (!this.$element.attr('tabindex')) this.$element.attr('tabindex', -1);
  121. this.$element.on('keyup.dismiss.modal',
  122. function(e) {
  123. e.which == 27 && that.hide();
  124. });
  125. } else if (!this.isShown) {
  126. this.$element.off('keyup.dismiss.modal')
  127. }
  128. },
  129. hideWithTransition: function() {
  130. var that = this,
  131. timeout = setTimeout(function() {
  132. that.$element.off($.support.transition.end);
  133. that.hideModal();
  134. },
  135. 500);
  136. this.$element.one($.support.transition.end,
  137. function() {
  138. clearTimeout(timeout);
  139. that.hideModal();
  140. });
  141. },
  142. hideModal: function() {
  143. var prop = this.options.height ? 'height': 'max-height';
  144. var value = this.options.height || this.options.maxHeight;
  145. if (value) {
  146. this.$element.find('.modal-body').css('overflow', '').css(prop, '');
  147. }
  148. this.$element.hide().trigger('hidden');
  149. },
  150. removeLoading: function() {
  151. this.$loading.remove();
  152. this.$loading = null;
  153. this.isLoading = false;
  154. },
  155. loading: function(callback) {
  156. callback = callback ||
  157. function() {};
  158. var animate = this.$element.hasClass('fade') ? 'fade': '';
  159. if (!this.isLoading) {
  160. var doAnimate = $.support.transition && animate;
  161. this.$loading = $('<div class="loading-mask ' + animate + '">').append(this.options.spinner).appendTo(this.$element);
  162. if (doAnimate) this.$loading[0].offsetWidth;
  163. /*force reflow*/
  164. this.$loading.addClass('in');
  165. this.isLoading = true;
  166. doAnimate ? this.$loading.one($.support.transition.end, callback) : callback();
  167. } else if (this.isLoading && this.$loading) {
  168. this.$loading.removeClass('in');
  169. var that = this;
  170. $.support.transition && this.$element.hasClass('fade') ? this.$loading.one($.support.transition.end,
  171. function() {
  172. that.removeLoading()
  173. }) : that.removeLoading();
  174. } else if (callback) {
  175. callback(this.isLoading);
  176. }
  177. },
  178. focus: function() {
  179. var $focusElem = this.$element.find(this.options.focusOn);
  180. $focusElem = $focusElem.length ? $focusElem: this.$element;
  181. $focusElem.focus();
  182. },
  183. attention: function() {
  184. /*NOTE: transitionEnd with keyframes causes odd behaviour*/
  185. if (this.options.attentionAnimation) {
  186. this.$element.removeClass('animated').removeClass(this.options.attentionAnimation);
  187. var that = this;
  188. setTimeout(function() {
  189. that.$element.addClass('animated').addClass(that.options.attentionAnimation);
  190. },
  191. 0);
  192. }
  193. this.focus();
  194. },
  195. destroy: function() {
  196. var e = $.Event('destroy');
  197. this.$element.trigger(e);
  198. if (e.isDefaultPrevented()) return;
  199. this.$element.off('.modal').removeData('modal').removeClass('in').attr('aria-hidden', true);
  200. if (this.$parent !== this.$element.parent()) {
  201. this.$element.appendTo(this.$parent);
  202. } else if (!this.$parent.length) {
  203. // modal is not part of the DOM so remove it.
  204. this.$element.remove();
  205. this.$element = null;
  206. }
  207. this.$element.trigger('destroyed');
  208. }
  209. };
  210. $.fn.modal = function(option, args) {
  211. return this.each(function() {
  212. var $this = $(this),
  213. data = $this.data('modal'),
  214. options = $.extend({},
  215. $.fn.modal.defaults, $this.data(), typeof option == 'object' && option);
  216. if (!data) $this.data('modal', (data = new Modal(this, options)));
  217. if (typeof option == 'string') data[option].apply(data, [].concat(args));
  218. else if (options.show) data.show()
  219. })
  220. };
  221. $.fn.modal.defaults = {
  222. keyboard: true,
  223. backdrop: true,
  224. loading: false,
  225. show: true,
  226. width: null,
  227. height: null,
  228. maxHeight: null,
  229. modalOverflow: false,
  230. consumeTab: true,
  231. focusOn: null,
  232. replace: false,
  233. resize: false,
  234. attentionAnimation: 'shake',
  235. manager: 'body',
  236. spinner: '<div class="loading-spinner" style="width:32px;margin-left:-16px;"><img src="data:image/gif;base64,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"></div></div>',
  237. backdropTemplate: '<div class="modal-backdrop" />'
  238. };
  239. $.fn.modal.Constructor = Modal;
  240. $(function() {
  241. $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]',
  242. function(e) {
  243. var $this = $(this),
  244. href = $this.attr('href'),
  245. $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))),
  246. //strip for ie7
  247. option = $target.data('modal') ? 'toggle': $.extend({
  248. remote: !/#/.test(href) && href
  249. },
  250. $target.data(), $this.data());
  251. e.preventDefault();
  252. $target.modal(option).one('hide',
  253. function() {
  254. $this.focus();
  255. })
  256. });
  257. });
  258. } (window.jQuery);
  259. $(".modal").resize(function(){var modal_h=$(".modal").height();var windows_h=$(window).width();if(modal_h>=windows_h){$(this).addClass("modal-overflow modal-overflow2");return;}
  260. else{$(this).removeClass("modal-overflow modal-overflow2");}});