rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

refactor modal

Browse Source
This commit is contained in:
Jacob Thornton 2011-11-24 20:04:07 -08:00
parent 69372701cf
commit 1fa02fbda2
2 changed files with 44 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/javascript.html
View File

@ -255,9 +255,9 @@ $('#my-modal').bind('hidden', function () {
})</pre> })</pre>
<h3>Demo</h3> <h3>Demo</h3>
<!-- sample modal content --> <!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade"> <div id="myModal" class="modal hide fade">
<div class="modal-header"> <div class="modal-header">
<a href="#" class="close" data-modal-dismiss="true" >&times;</a> <a href="#" class="close" data-dismiss="modal" >&times;</a>
<h3>Modal Heading</h3> <h3>Modal Heading</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -265,10 +265,11 @@ $('#my-modal').bind('hidden', function () {
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn primary">Save changes</a> <a href="#" class="btn primary">Save changes</a>
<a href="#" class="btn" data-modal-dismiss="true" >Close</a> <a href="#" class="btn" data-dismiss="modal" >Close</a>
</div> </div>
</div> </div>
<button data-toggle="modal" data-target="modal-from-dom" class="btn danger">
<button data-toggle="modal" data-target="#myModal" class="btn danger">
Launch Modal Launch Modal
</button> </button>
</div> </div>

78
js/bootstrap-modal.js vendored
View File

@ -22,19 +22,14 @@
"use strict" "use strict"
/* MODAL PUBLIC CLASS DEFINITION /* MODAL CLASS DEFINITION
* ============================= */ * ====================== */
var Modal = function ( content, options ) { var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults, options) this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content) this.$element = $(content)
.delegate('.close', 'click.modal', $.proxy(this.hide, this)) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
this.settings.show && this.show()
if ( this.settings.show ) {
this.show()
}
return this
} }
Modal.prototype = { Modal.prototype = {
@ -45,6 +40,9 @@
, show: function () { , show: function () {
var that = this var that = this
if (this.isShown) return
this.isShown = true this.isShown = true
this.$element.trigger('show') this.$element.trigger('show')
@ -67,16 +65,12 @@
that.$element.trigger('shown') that.$element.trigger('shown')
}) })
return this
} }
, hide: function ( e ) { , hide: function ( e ) {
e && e.preventDefault() e && e.preventDefault()
if ( !this.isShown ) { if (!this.isShown) return
return this
}
var that = this var that = this
this.isShown = false this.isShown = false
@ -90,8 +84,6 @@
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) : hideWithTransition.call(this) :
hideModal.call(this) hideModal.call(this)
return this
} }
} }
@ -124,6 +116,7 @@
function backdrop ( callback ) { function backdrop ( callback ) {
var that = this var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : '' , animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.settings.backdrop) { if (this.isShown && this.settings.backdrop) {
var doAnimate = $.support.transition && animate var doAnimate = $.support.transition && animate
@ -134,9 +127,7 @@
this.$backdrop.click($.proxy(this.hide, this)) this.$backdrop.click($.proxy(this.hide, this))
} }
if ( doAnimate ) { if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop[0].offsetWidth // force reflow
}
this.$backdrop.addClass('in') this.$backdrop.addClass('in')
@ -164,13 +155,11 @@
function escape() { function escape() {
var that = this var that = this
if (this.isShown && this.settings.keyboard) { if (this.isShown && this.settings.keyboard) {
$(document).bind('keyup.modal', function ( e ) { $(document).bind('keyup.dismiss.modal', function ( e ) {
if ( e.which == 27 ) { e.which == 27 && that.hide()
that.hide()
}
}) })
} else if (!this.isShown) { } else if (!this.isShown) {
$(document).unbind('keyup.modal') $(document).unbind('keyup.dismiss.modal')
} }
} }
@ -178,48 +167,33 @@
/* MODAL PLUGIN DEFINITION /* MODAL PLUGIN DEFINITION
* ======================= */ * ======================= */
$.fn.modal = function ( options ) { $.fn.modal = function ( option ) {
var modal = this.data('modal')
if (!modal) {
if (typeof options == 'string') {
options = {
show: /show|toggle/.test(options)
}
}
return this.each(function () { return this.each(function () {
$(this).data('modal', new Modal(this, options)) var $this = $(this)
, data = $this.data('modal')
, options = typeof option == 'object' && option
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
}) })
} }
if ( typeof options == 'string' ) {
modal[options]()
} else if ( modal ) {
modal.toggle()
}
return this
}
$.fn.modal.Modal = Modal
$.fn.modal.defaults = { $.fn.modal.defaults = {
backdrop: true backdrop: true
, keyboard: true , keyboard: true
, show: true , show: true
} }
$.fn.modal.Modal = Modal
/* MODAL DATA- IMPLEMENTATION
* ========================== */ /* MODAL DATA-API
* ============== */
$(document).ready(function () { $(document).ready(function () {
$('body').delegate('[data-controls-modal]', 'click.modal.data-api', function (e) { $('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) {
e.preventDefault()
var $this = $(this) var $this = $(this)
$('#' + $this.attr('data-controls-modal')).modal( $this.data() ) e.preventDefault()
$($this.attr('data-target')).modal($this.data())
}) })
}) })