/* ======================================================================== * Bootstrap: modal.js v3.0.0 * http://twbs.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. * ======================================================================== */ ;(function(factory) { if(typeof define === 'function' && define.amd) { define(['jquery'], factory); } else { factory(jQuery); } })(function($) { function transitionEnd() { var el = document.createElement('bootstrap') var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend' , 'transition' : 'transitionend' } for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } } } } // http://blog.alexmaccaw.com/css-transitions $.fn.emulateTransitionEnd = function (duration, cb) { var called = false, $el = this $(this).one($.support.transition.end, function () { called = true }) var callback = function () { if(typeof cb === 'function') { cb(); } if (!called) { $($el).trigger($.support.transition.end) } } setTimeout(callback, duration) return this } $(function () { $.support.transition = transitionEnd() }) var Fmodal = function (element, options) { this.options = options this.$element = $(element) this.$backdrop = this.$body = $(document.body) this.isShown = null this.scrollbarWidth = 0 if (this.options.remote) this.$element.load(this.options.remote) } Fmodal.DEFAULTS = { backdrop: true , keyboard: true , show: true } Fmodal.prototype.toggle = function (_relatedTarget) { return this[!this.isShown ? 'show' : 'hide'](_relatedTarget) } Fmodal.prototype.show = function (_relatedTarget) { var that = this var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) this.$element.trigger(e) if (this.isShown || e.isDefaultPrevented()) { if(that.options.afterShow && typeof that.options.afterShow === 'function') that.options.afterShow(); return; } this.isShown = true this.checkScrollbar() this.setScrollbar() $(document.body).addClass('modal-open') this.escape() this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') if (!that.$element.parent().length) { that.$element.appendTo(document.body) // don't move modals dom position } if($('.modal').length > 1) { that.$element.addClass('upon'); } that.$element.show() if (transition) { that.$element[0].offsetWidth // force reflow } that.$element .addClass('in') .attr('aria-hidden', false) that.enforceFocus() var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) if(that.options.afterShow && typeof that.options.afterShow === 'function') that.options.afterShow(); if(transition) { that.$element.find('.modal-dialog') // wait for modal to slide in .one($.support.transition.end, function () { that.$element.focus().trigger(e) }) .emulateTransitionEnd(300) } else { that.$element.focus().trigger(e) } that.position() }) } Fmodal.prototype.position = function(){ var that = this, $dialog = that.$element.find('.modal-dialog'), $docHeight = $dialog.parent().height(), $modalHeight = $dialog.height(), marginTop = ($docHeight-$modalHeight)/2 < 0 ? 0 : ($docHeight-$modalHeight)/2; this.$element.find('.modal-dialog').css({ 'margin-top' : marginTop }) } Fmodal.prototype.hide = function (e) { var that = this; if (e) e.preventDefault() e = $.Event('hide.bs.modal') this.$element.trigger(e) if (!this.isShown || e.isDefaultPrevented()) return this.isShown = false if($('body').children('.modal').length > 1) { that.$element.addClass('upon'); } else { $(document.body).removeClass('modal-open') that.resetScrollbar() } this.escape() $(document).off('focusin.bs.modal') this.$element .removeClass('in') .attr('aria-hidden', true) .off('click.dismiss.modal') if($.support.transition && this.$element.hasClass('fade')) { this.$element .one($.support.transition.end, $.proxy(this.hideModal, this)) .emulateTransitionEnd(300, that.options.afterClose) } else { this.hideModal() if(that.options.afterClose && typeof that.options.afterClose === 'function') that.options.afterClose(); } } Fmodal.prototype.enforceFocus = function () { $(document) .off('focusin.bs.modal') // guard against infinite focus loop .on('focusin.bs.modal', $.proxy(function (e) { if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { this.$element.focus() } }, this)) } Fmodal.prototype.escape = function () { if (this.isShown && this.options.keyboard) { this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) { e.which == 27 && this.hide() }, this)) } else if (!this.isShown) { this.$element.off('keyup.dismiss.bs.modal') } } Fmodal.prototype.hideModal = function () { var that = this this.$element.hide() this.backdrop(function () { that.removeBackdrop() if(!that.options.isStatic) { that.$element.remove(); } else { that.$element.trigger('hidden.bs.modal'); } }) } Fmodal.prototype.removeBackdrop = function () { this.$backdrop && this.$backdrop.remove() this.$backdrop = null } Fmodal.prototype.backdrop = function (callback) { var that = this var animate = this.$element.hasClass('fade') ? 'fade' : '' if (this.isShown && this.options.backdrop) { var doAnimate = $.support.transition && animate if($('.modal-backdrop').length) animate += ' upon'; this.$backdrop = $('
') .appendTo(document.body) this.$element.on('click.dismiss.modal', $.proxy(function (e) { if (e.target !== e.currentTarget) return this.options.backdrop == 'static' ? this.$element[0].focus.call(this.$element[0]) : this.hide.call(this) }, this)) if (doAnimate) this.$backdrop[0].offsetWidth // force reflow this.$backdrop.addClass('in') if (!callback) return doAnimate ? this.$backdrop .one($.support.transition.end, callback) .emulateTransitionEnd(150) : callback() } else if (!this.isShown && this.$backdrop) { this.$backdrop.removeClass('in') $.support.transition && this.$element.hasClass('fade')? this.$backdrop .one($.support.transition.end, callback) .emulateTransitionEnd(150) : callback() } else if (callback) { callback() } } Fmodal.prototype.checkScrollbar = function () { this.scrollbarWidth = this.measureScrollbar() } Fmodal.prototype.measureScrollbar = function () { // thx walsh if (document.body.clientWidth >= window.innerWidth) return 0 var scrollDiv = document.createElement('div') scrollDiv.className = 'modal-scrollbar-measure' this.$body.append(scrollDiv) var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth this.$body[0].removeChild(scrollDiv) return scrollbarWidth } Fmodal.prototype.setScrollbar = function () { var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) if (isTouch()) { $('html').addClass('disscroll').find('body').addClass('disscroll') } } Fmodal.prototype.resetScrollbar = function () { this.$body.css('padding-right', '') if (isTouch()) { $('html').removeClass('disscroll').find('body').removeClass('disscroll') } } function isTouch() { return 'ontouchend' in window } // MODAL PLUGIN DEFINITION // ======================= $.fn.fmodal = function (option, _relatedTarget) { return this.each(function () { var $this = $(this) var data = $this.data('bs.fmodal') var options = $.extend({}, Fmodal.DEFAULTS, $this.data(), typeof option == 'object' && option) if (!data) $this.data('bs.fmodal', (data = new Fmodal(this, options))) if (typeof option == 'string') data[option](_relatedTarget) else if (options.show) data.show(_relatedTarget) }) } $(function() { $(window).on('resize', function(){ $('.modal[role="dialog"]').fmodal('position'); }) }) $.fn.fmodal.Constructor = Fmodal })