modal.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. /* ========================================================================
  2. * Bootstrap: modal.js v3.3.6
  3. * http://getbootstrap.com/javascript/#modals
  4. * ========================================================================
  5. * Copyright 2011-2015 Twitter, Inc.
  6. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  7. * ======================================================================== */
  8. +function ($) {
  9. 'use strict';
  10. // MODAL CLASS DEFINITION
  11. // ======================
  12. var Modal = function (element, options) {
  13. this.options = options
  14. this.$body = $(document.body)
  15. this.$element = $(element)
  16. this.$dialog = this.$element.find('.modal-dialog')
  17. this.$backdrop = null
  18. this.isShown = null
  19. this.originalBodyPad = null
  20. this.scrollbarWidth = 0
  21. this.ignoreBackdropClick = false
  22. if (this.options.remote) {
  23. this.$element
  24. .find('.modal-content')
  25. .load(this.options.remote, $.proxy(function () {
  26. this.$element.trigger('loaded.bs.modal')
  27. }, this))
  28. }
  29. }
  30. Modal.VERSION = '3.3.6'
  31. Modal.TRANSITION_DURATION = 300
  32. Modal.BACKDROP_TRANSITION_DURATION = 150
  33. Modal.DEFAULTS = {
  34. backdrop: true,
  35. keyboard: true,
  36. show: true
  37. }
  38. Modal.prototype.toggle = function (_relatedTarget) {
  39. return this.isShown ? this.hide() : this.show(_relatedTarget)
  40. }
  41. Modal.prototype.show = function (_relatedTarget) {
  42. var that = this
  43. var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
  44. this.$element.trigger(e)
  45. if (this.isShown || e.isDefaultPrevented()) return
  46. this.isShown = true
  47. this.checkScrollbar()
  48. this.setScrollbar()
  49. this.$body.addClass('modal-open')
  50. this.escape()
  51. this.resize()
  52. this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
  53. this.$dialog.on('mousedown.dismiss.bs.modal', function () {
  54. that.$element.one('mouseup.dismiss.bs.modal', function (e) {
  55. if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
  56. })
  57. })
  58. this.backdrop(function () {
  59. var transition = $.support.transition && that.$element.hasClass('fade')
  60. if (!that.$element.parent().length) {
  61. that.$element.appendTo(that.$body) // don't move modals dom position
  62. }
  63. that.$element
  64. .show()
  65. .scrollTop(0)
  66. that.adjustDialog()
  67. if (transition) {
  68. that.$element[0].offsetWidth // force reflow
  69. }
  70. that.$element.addClass('in')
  71. that.enforceFocus()
  72. var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
  73. transition ?
  74. that.$dialog // wait for modal to slide in
  75. .one('bsTransitionEnd', function () {
  76. that.$element.trigger('focus').trigger(e)
  77. })
  78. .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
  79. that.$element.trigger('focus').trigger(e)
  80. })
  81. }
  82. Modal.prototype.hide = function (e) {
  83. if (e) e.preventDefault()
  84. e = $.Event('hide.bs.modal')
  85. this.$element.trigger(e)
  86. if (!this.isShown || e.isDefaultPrevented()) return
  87. this.isShown = false
  88. this.escape()
  89. this.resize()
  90. $(document).off('focusin.bs.modal')
  91. this.$element
  92. .removeClass('in')
  93. .off('click.dismiss.bs.modal')
  94. .off('mouseup.dismiss.bs.modal')
  95. this.$dialog.off('mousedown.dismiss.bs.modal')
  96. $.support.transition && this.$element.hasClass('fade') ?
  97. this.$element
  98. .one('bsTransitionEnd', $.proxy(this.hideModal, this))
  99. .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
  100. this.hideModal()
  101. }
  102. Modal.prototype.enforceFocus = function () {
  103. $(document)
  104. .off('focusin.bs.modal') // guard against infinite focus loop
  105. .on('focusin.bs.modal', $.proxy(function (e) {
  106. if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
  107. this.$element.trigger('focus')
  108. }
  109. }, this))
  110. }
  111. Modal.prototype.escape = function () {
  112. if (this.isShown && this.options.keyboard) {
  113. this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
  114. e.which == 27 && this.hide()
  115. }, this))
  116. } else if (!this.isShown) {
  117. this.$element.off('keydown.dismiss.bs.modal')
  118. }
  119. }
  120. Modal.prototype.resize = function () {
  121. if (this.isShown) {
  122. $(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
  123. } else {
  124. $(window).off('resize.bs.modal')
  125. }
  126. }
  127. Modal.prototype.hideModal = function () {
  128. var that = this
  129. this.$element.hide()
  130. this.backdrop(function () {
  131. that.$body.removeClass('modal-open')
  132. that.resetAdjustments()
  133. that.resetScrollbar()
  134. that.$element.trigger('hidden.bs.modal')
  135. })
  136. }
  137. Modal.prototype.removeBackdrop = function () {
  138. this.$backdrop && this.$backdrop.remove()
  139. this.$backdrop = null
  140. }
  141. Modal.prototype.backdrop = function (callback) {
  142. var that = this
  143. var animate = this.$element.hasClass('fade') ? 'fade' : ''
  144. if (this.isShown && this.options.backdrop) {
  145. var doAnimate = $.support.transition && animate
  146. this.$backdrop = $(document.createElement('div'))
  147. .addClass('modal-backdrop ' + animate)
  148. .appendTo(this.$body)
  149. this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
  150. if (this.ignoreBackdropClick) {
  151. this.ignoreBackdropClick = false
  152. return
  153. }
  154. if (e.target !== e.currentTarget) return
  155. this.options.backdrop == 'static'
  156. ? this.$element[0].focus()
  157. : this.hide()
  158. }, this))
  159. if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
  160. this.$backdrop.addClass('in')
  161. if (!callback) return
  162. doAnimate ?
  163. this.$backdrop
  164. .one('bsTransitionEnd', callback)
  165. .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
  166. callback()
  167. } else if (!this.isShown && this.$backdrop) {
  168. this.$backdrop.removeClass('in')
  169. var callbackRemove = function () {
  170. that.removeBackdrop()
  171. callback && callback()
  172. }
  173. $.support.transition && this.$element.hasClass('fade') ?
  174. this.$backdrop
  175. .one('bsTransitionEnd', callbackRemove)
  176. .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
  177. callbackRemove()
  178. } else if (callback) {
  179. callback()
  180. }
  181. }
  182. // these following methods are used to handle overflowing modals
  183. Modal.prototype.handleUpdate = function () {
  184. this.adjustDialog()
  185. }
  186. Modal.prototype.adjustDialog = function () {
  187. var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
  188. this.$element.css({
  189. paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
  190. paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
  191. })
  192. }
  193. Modal.prototype.resetAdjustments = function () {
  194. this.$element.css({
  195. paddingLeft: '',
  196. paddingRight: ''
  197. })
  198. }
  199. Modal.prototype.checkScrollbar = function () {
  200. var fullWindowWidth = window.innerWidth
  201. if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
  202. var documentElementRect = document.documentElement.getBoundingClientRect()
  203. fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
  204. }
  205. this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
  206. this.scrollbarWidth = this.measureScrollbar()
  207. }
  208. Modal.prototype.setScrollbar = function () {
  209. var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
  210. this.originalBodyPad = document.body.style.paddingRight || ''
  211. if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  212. }
  213. Modal.prototype.resetScrollbar = function () {
  214. this.$body.css('padding-right', this.originalBodyPad)
  215. }
  216. Modal.prototype.measureScrollbar = function () { // thx walsh
  217. var scrollDiv = document.createElement('div')
  218. scrollDiv.className = 'modal-scrollbar-measure'
  219. this.$body.append(scrollDiv)
  220. var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
  221. this.$body[0].removeChild(scrollDiv)
  222. return scrollbarWidth
  223. }
  224. // MODAL PLUGIN DEFINITION
  225. // =======================
  226. function Plugin(option, _relatedTarget) {
  227. return this.each(function () {
  228. var $this = $(this)
  229. var data = $this.data('bs.modal')
  230. var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
  231. if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
  232. if (typeof option == 'string') data[option](_relatedTarget)
  233. else if (options.show) data.show(_relatedTarget)
  234. })
  235. }
  236. var old = $.fn.modal
  237. $.fn.modal = Plugin
  238. $.fn.modal.Constructor = Modal
  239. // MODAL NO CONFLICT
  240. // =================
  241. $.fn.modal.noConflict = function () {
  242. $.fn.modal = old
  243. return this
  244. }
  245. // MODAL DATA-API
  246. // ==============
  247. $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
  248. var $this = $(this)
  249. var href = $this.attr('href')
  250. var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
  251. var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
  252. if ($this.is('a')) e.preventDefault()
  253. $target.one('show.bs.modal', function (showEvent) {
  254. if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
  255. $target.one('hidden.bs.modal', function () {
  256. $this.is(':visible') && $this.trigger('focus')
  257. })
  258. })
  259. Plugin.call($target, option, this)
  260. })
  261. }(jQuery);