bootstrap-modal.js 6.01 KB
Newer Older
Jacob Thornton's avatar
Jacob Thornton committed
1
/* =========================================================
Jacob Thornton's avatar
Jacob Thornton committed
2
 * bootstrap-modal.js v2.0.3
Jacob Thornton's avatar
Jacob Thornton committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 * http://twitter.github.com/bootstrap/javascript.html#modals
 * =========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */


21
22
23
!function ($) {

  "use strict"; // jshint ;_;
Jacob Thornton's avatar
Jacob Thornton committed
24
25
26
27
28


 /* MODAL CLASS DEFINITION
  * ====================== */

29
  var Modal = function (content, options) {
30
    this.options = options
Jacob Thornton's avatar
Jacob Thornton committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    this.$element = $(content)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
  }

  Modal.prototype = {

      constructor: Modal

    , toggle: function () {
        return this[!this.isShown ? 'show' : 'hide']()
      }

    , show: function () {
        var that = this
45
          , e = $.Event('show')
Jacob Thornton's avatar
Jacob Thornton committed
46

47
48
49
        this.$element.trigger(e)

        if (this.isShown || e.isDefaultPrevented()) return
Jacob Thornton's avatar
Jacob Thornton committed
50
51
52
53
54

        $('body').addClass('modal-open')

        this.isShown = true

55
56
57
        this.escape()

        this.backdrop(function () {
Jacob Thornton's avatar
Jacob Thornton committed
58
59
          var transition = $.support.transition && that.$element.hasClass('fade')

60
61
62
          if (!that.$element.parent().length) {
            that.$element.appendTo(document.body) //don't move modals dom position
          }
Jacob Thornton's avatar
Jacob Thornton committed
63
64
65
66
67
68
69
70
71
72

          that.$element
            .show()

          if (transition) {
            that.$element[0].offsetWidth // force reflow
          }

          that.$element.addClass('in')

73
74
          that.enforceFocus()

Jacob Thornton's avatar
Jacob Thornton committed
75
76
77
78
79
80
81
          transition ?
            that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
            that.$element.trigger('shown')

        })
      }

82
    , hide: function (e) {
Jacob Thornton's avatar
Jacob Thornton committed
83
84
85
        e && e.preventDefault()

        var that = this
86
87
88
89
90
91
92

        e = $.Event('hide')

        this.$element.trigger(e)

        if (!this.isShown || e.isDefaultPrevented()) return

Jacob Thornton's avatar
Jacob Thornton committed
93
94
95
96
        this.isShown = false

        $('body').removeClass('modal-open')

97
        this.escape()
98
99

        $(document).off('focusin.modal')
Jacob Thornton's avatar
Jacob Thornton committed
100

101
        this.$element.removeClass('in')
Jacob Thornton's avatar
Jacob Thornton committed
102
103

        $.support.transition && this.$element.hasClass('fade') ?
104
105
          this.hideWithTransition() :
          this.hideModal()
Jacob Thornton's avatar
Jacob Thornton committed
106
107
      }

108
109
110
111
112
113
114
115
    , enforceFocus: function () {
        var that = this
        $(document).on('focusin.modal', function (e) {
          if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
            that.$element.focus()
          }
        })
      }
Jacob Thornton's avatar
Jacob Thornton committed
116

117
118
119
120
121
122
123
124
125
126
    , escape: function () {
        var that = this
        if (this.isShown && this.options.keyboard) {
          $(document).on('keyup.dismiss.modal', function ( e ) {
            e.which == 27 && that.hide()
          })
        } else if (!this.isShown) {
          $(document).off('keyup.dismiss.modal')
        }
      }
Jacob Thornton's avatar
Jacob Thornton committed
127

128
129
130
131
132
133
134
135
136
137
138
139
    , hideWithTransition: function () {
        var that = this
          , timeout = setTimeout(function () {
              that.$element.off($.support.transition.end)
              that.hideModal()
            }, 500)

        this.$element.one($.support.transition.end, function () {
          clearTimeout(timeout)
          that.hideModal()
        })
      }
Jacob Thornton's avatar
Jacob Thornton committed
140

141
142
143
144
    , hideModal: function (that) {
        this.$element
          .hide()
          .trigger('hidden')
Jacob Thornton's avatar
Jacob Thornton committed
145

146
147
        this.backdrop()
      }
Jacob Thornton's avatar
Jacob Thornton committed
148

149
150
151
152
    , removeBackdrop: function () {
        this.$backdrop.remove()
        this.$backdrop = null
      }
Jacob Thornton's avatar
Jacob Thornton committed
153

154
155
156
    , backdrop: function (callback) {
        var that = this
          , animate = this.$element.hasClass('fade') ? 'fade' : ''
Jacob Thornton's avatar
Jacob Thornton committed
157

158
159
        if (this.isShown && this.options.backdrop) {
          var doAnimate = $.support.transition && animate
Jacob Thornton's avatar
Jacob Thornton committed
160

161
162
          this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
            .appendTo(document.body)
Jacob Thornton's avatar
Jacob Thornton committed
163

164
165
166
          if (this.options.backdrop != 'static') {
            this.$backdrop.click($.proxy(this.hide, this))
          }
Jacob Thornton's avatar
Jacob Thornton committed
167

168
          if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
Jacob Thornton's avatar
Jacob Thornton committed
169

170
          this.$backdrop.addClass('in')
Jacob Thornton's avatar
Jacob Thornton committed
171

172
173
174
          doAnimate ?
            this.$backdrop.one($.support.transition.end, callback) :
            callback()
Jacob Thornton's avatar
Jacob Thornton committed
175

176
177
        } else if (!this.isShown && this.$backdrop) {
          this.$backdrop.removeClass('in')
Jacob Thornton's avatar
Jacob Thornton committed
178

179
180
181
          $.support.transition && this.$element.hasClass('fade')?
            this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
            this.removeBackdrop()
Jacob Thornton's avatar
Jacob Thornton committed
182

183
184
185
186
        } else if (callback) {
          callback()
        }
      }
Jacob Thornton's avatar
Jacob Thornton committed
187
188
189
190
191
192
  }


 /* MODAL PLUGIN DEFINITION
  * ======================= */

193
  $.fn.modal = function (option) {
Jacob Thornton's avatar
Jacob Thornton committed
194
195
196
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
197
        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
Jacob Thornton's avatar
Jacob Thornton committed
198
199
      if (!data) $this.data('modal', (data = new Modal(this, options)))
      if (typeof option == 'string') data[option]()
200
      else if (options.show) data.show()
Jacob Thornton's avatar
Jacob Thornton committed
201
202
203
204
205
206
    })
  }

  $.fn.modal.defaults = {
      backdrop: true
    , keyboard: true
207
    , show: true
Jacob Thornton's avatar
Jacob Thornton committed
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
  }

  $.fn.modal.Constructor = Modal


 /* MODAL DATA-API
  * ============== */

  $(function () {
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
      var $this = $(this), href
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())

      e.preventDefault()
      $target.modal(option)
    })
  })

227
}(window.jQuery);