bootstrap-modal.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. /* =========================================================
  2. * bootstrap-modal.js v2.0.2
  3. * http://twitter.github.com/bootstrap/javascript.html#modals
  4. * =========================================================
  5. * Copyright 2012 Twitter, Inc.
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. * ========================================================= */
  19. !function( $ ){
  20. "use strict"
  21. /* MODAL CLASS DEFINITION
  22. * ====================== */
  23. var Modal = function ( content, options ) {
  24. this.options = options
  25. this.$element = $(content)
  26. .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
  27. }
  28. Modal.prototype = {
  29. constructor: Modal
  30. , toggle: function () {
  31. return this[!this.isShown ? 'show' : 'hide']()
  32. }
  33. , show: function () {
  34. var that = this
  35. if (this.isShown) return
  36. $('body').addClass('modal-open')
  37. this.isShown = true
  38. this.$element.trigger('show')
  39. escape.call(this)
  40. backdrop.call(this, function () {
  41. var transition = $.support.transition && that.$element.hasClass('fade')
  42. !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position
  43. that.$element
  44. .show()
  45. if (transition) {
  46. that.$element[0].offsetWidth // force reflow
  47. }
  48. that.$element.addClass('in')
  49. transition ?
  50. that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
  51. that.$element.trigger('shown')
  52. })
  53. }
  54. , hide: function ( e ) {
  55. e && e.preventDefault()
  56. if (!this.isShown) return
  57. var that = this
  58. this.isShown = false
  59. $('body').removeClass('modal-open')
  60. escape.call(this)
  61. this.$element
  62. .trigger('hide')
  63. .removeClass('in')
  64. $.support.transition && this.$element.hasClass('fade') ?
  65. hideWithTransition.call(this) :
  66. hideModal.call(this)
  67. }
  68. }
  69. /* MODAL PRIVATE METHODS
  70. * ===================== */
  71. function hideWithTransition() {
  72. var that = this
  73. , timeout = setTimeout(function () {
  74. that.$element.off($.support.transition.end)
  75. hideModal.call(that)
  76. }, 500)
  77. this.$element.one($.support.transition.end, function () {
  78. clearTimeout(timeout)
  79. hideModal.call(that)
  80. })
  81. }
  82. function hideModal( that ) {
  83. this.$element
  84. .hide()
  85. .trigger('hidden')
  86. backdrop.call(this)
  87. }
  88. function backdrop( callback ) {
  89. var that = this
  90. , animate = this.$element.hasClass('fade') ? 'fade' : ''
  91. if (this.isShown && this.options.backdrop) {
  92. var doAnimate = $.support.transition && animate
  93. this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
  94. .appendTo(document.body)
  95. if (this.options.backdrop != 'static') {
  96. this.$backdrop.click($.proxy(this.hide, this))
  97. }
  98. if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
  99. this.$backdrop.addClass('in')
  100. doAnimate ?
  101. this.$backdrop.one($.support.transition.end, callback) :
  102. callback()
  103. } else if (!this.isShown && this.$backdrop) {
  104. this.$backdrop.removeClass('in')
  105. $.support.transition && this.$element.hasClass('fade')?
  106. this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
  107. removeBackdrop.call(this)
  108. } else if (callback) {
  109. callback()
  110. }
  111. }
  112. function removeBackdrop() {
  113. this.$backdrop.remove()
  114. this.$backdrop = null
  115. }
  116. function escape() {
  117. var that = this
  118. if (this.isShown && this.options.keyboard) {
  119. $(document).on('keyup.dismiss.modal', function ( e ) {
  120. e.which == 27 && that.hide()
  121. })
  122. } else if (!this.isShown) {
  123. $(document).off('keyup.dismiss.modal')
  124. }
  125. }
  126. /* MODAL PLUGIN DEFINITION
  127. * ======================= */
  128. $.fn.modal = function ( option ) {
  129. return this.each(function () {
  130. var $this = $(this)
  131. , data = $this.data('modal')
  132. , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
  133. if (!data) $this.data('modal', (data = new Modal(this, options)))
  134. if (typeof option == 'string') data[option]()
  135. else if (options.show) data.show()
  136. })
  137. }
  138. $.fn.modal.defaults = {
  139. backdrop: true
  140. , keyboard: true
  141. , show: true
  142. }
  143. $.fn.modal.Constructor = Modal
  144. /* MODAL DATA-API
  145. * ============== */
  146. $(function () {
  147. $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
  148. var $this = $(this), href
  149. , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
  150. , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
  151. e.preventDefault()
  152. $target.modal(option)
  153. })
  154. })
  155. }( window.jQuery );