读bootstrap modal.js

保留下来自己看的时候的注释，以便将来自己学习使用
若有不正确之处，请指正，一起学习

/* ========================================================================* Bootstrap: modal.js v3.3.7* http://getbootstrap.com/javascript/#modals* ========================================================================* Copyright 2011-2016 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)* ======================================================================== */+function ($) {'use strict';// MODAL CLASS DEFINITION// ======================var Modal = function (element, options) {// element --> 弹框层this.options             = optionsthis.$body               = $(document.body)this.$element            = $(element) // jQuery 对象this.$dialog             = this.$element.find('.modal-dialog')this.$backdrop           = null // 半透明背景层this.isShown             = nullthis.originalBodyPad     = nullthis.scrollbarWidth      = 0this.ignoreBackdropClick = false// ???????????????if (this.options.remote) {this.$element.find('.modal-content').load(this.options.remote, $.proxy(function () {this.$element.trigger('loaded.bs.modal')}, this))}}Modal.VERSION  = '3.3.7'Modal.TRANSITION_DURATION = 300Modal.BACKDROP_TRANSITION_DURATION = 150Modal.DEFAULTS = {backdrop: true, // 默认单击弹窗以外的地方时自动关闭弹窗keyboard: true, // 默认设置，按Esc键关闭弹窗show: true // 默认设置，单击触发元素时打开弹窗}Modal.prototype.toggle = function (_relatedTarget) {return this.isShown ? this.hide() : this.show(_relatedTarget)}Modal.prototype.show = function (_relatedTarget) {var that = this // Modal实例调用的show, 所以this指代Modal实例var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })this.$element.trigger(e)// ** 去执行 入口 中的 $target.one('show.bs.modal')if (this.isShown || e.isDefaultPrevented()) returnthis.isShown = truethis.checkScrollbar()this.setScrollbar()this.$body.addClass('modal-open')this.escape()this.resize()// 触发关闭事件  // 点击 xthis.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))// ???????  或许是 当点击dialog时 不 移除弹框层？？？this.$dialog.on('mousedown.dismiss.bs.modal', function () {that.$element.one('mouseup.dismiss.bs.modal', function (e) {if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true})})this.backdrop(function () {var transition = $.support.transition && that.$element.hasClass('fade')if (!that.$element.parent().length) {that.$element.appendTo(that.$body) // don't move modals dom position}that.$element.show().scrollTop()that.adjustDialog()if (transition) {// ???????????that.$element[0].offsetWidth // force reflow}that.$element.addClass('in')that.enforceFocus() // 为什么要给弹出层加焦点 ？？？？var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })// ??????????????transition ?that.$dialog // wait for modal to slide in.one('bsTransitionEnd', function () {that.$element.trigger('focus').trigger(e)}).emulateTransitionEnd(Modal.TRANSITION_DURATION) :that.$element.trigger('focus').trigger(e)})}Modal.prototype.hide = function (e) {if (e) e.preventDefault()e = $.Event('hide.bs.modal')this.$element.trigger(e)if (!this.isShown || e.isDefaultPrevented()) returnthis.isShown = falsethis.escape()this.resize()$(document).off('focusin.bs.modal')this.$element.removeClass('in').off('click.dismiss.bs.modal').off('mouseup.dismiss.bs.modal')this.$dialog.off('mousedown.dismiss.bs.modal')$.support.transition && this.$element.hasClass('fade') ?this.$element.one('bsTransitionEnd', $.proxy(this.hideModal, this)).emulateTransitionEnd(Modal.TRANSITION_DURATION) :this.hideModal()}// 强制给弹窗设定焦点Modal.prototype.enforceFocus = function () {$(document).off('focusin.bs.modal') // guard against infinite focus loop.on('focusin.bs.modal', $.proxy(function (e) {if (document !== e.target &&this.$element[0] !== e.target &&!this.$element.has(e.target).length) {this.$element.trigger('focus')// ??????????? 设置焦点的作用}}, this))}Modal.prototype.escape = function () {if (this.isShown && this.options.keyboard) {this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {e.which == 27 && this.hide()}, this))} else if (!this.isShown) {this.$element.off('keydown.dismiss.bs.modal')}}Modal.prototype.resize = function () {if (this.isShown) {$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))} else {$(window).off('resize.bs.modal')}}Modal.prototype.hideModal = function () {// 把 id="myModal" 层隐藏var that = thisthis.$element.hide()// 调用原型上的  backdrop// 进入第二个条件 用来删除 半透明背景层this.backdrop(function () {that.$body.removeClass('modal-open')that.resetAdjustments()that.resetScrollbar()that.$element.trigger('hidden.bs.modal')})}Modal.prototype.removeBackdrop = function () {// 用来remove dom 节点 (手动添加的那个 dom节点)this.$backdrop && this.$backdrop.remove()this.$backdrop = null}Modal.prototype.backdrop = function (callback) {// 透明背景层 显示隐藏var that = thisvar animate = this.$element.hasClass('fade') ? 'fade' : ''// 是否支持css3动画  $.support.transitionif (this.isShown && this.options.backdrop) {var doAnimate = $.support.transition && animatethis.$backdrop = $(document.createElement('div')).addClass('modal-backdrop ' + animate).appendTo(this.$body)// 点击 模态框 关闭 dialogthis.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {if (this.ignoreBackdropClick) {this.ignoreBackdropClick = falsereturn}if (e.target !== e.currentTarget) returnthis.options.backdrop == 'static'? this.$element[0].focus(): this.hide()}, this))if (doAnimate) this.$backdrop[0].offsetWidth // force reflowthis.$backdrop.addClass('in')if (!callback) returndoAnimate ?this.$backdrop.one('bsTransitionEnd', callback).emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :callback()} else if (!this.isShown && this.$backdrop) {// 删除透明背景层(仅仅是删除控制的类名)this.$backdrop.removeClass('in')var callbackRemove = function () {that.removeBackdrop()callback && callback()}$.support.transition && this.$element.hasClass('fade') ?this.$backdrop.one('bsTransitionEnd', callbackRemove).emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :callbackRemove()} else if (callback) {callback()}}// these following methods are used to handle overflowing modalsModal.prototype.handleUpdate = function () {this.adjustDialog()}Modal.prototype.adjustDialog = function () {// this.$element[0] js 对象var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeightthis.$element.css({paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''})}Modal.prototype.resetAdjustments = function () {this.$element.css({paddingLeft: '',paddingRight: ''})}Modal.prototype.checkScrollbar = function () {var fullWindowWidth = window.innerWidth // 包含滚动条宽度if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8var documentElementRect = document.documentElement.getBoundingClientRect()fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)}this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth// document.body.clientWidth  === fullWindowWidth// this.bodyIsOverflowing  -- > faslethis.scrollbarWidth = this.measureScrollbar()}Modal.prototype.setScrollbar = function () {var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)this.originalBodyPad = document.body.style.paddingRight || ''if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)// 等待}Modal.prototype.resetScrollbar = function () {this.$body.css('padding-right', this.originalBodyPad)}Modal.prototype.measureScrollbar = function () { // thx walsh// 创建一个div  获得滚动条的宽度var scrollDiv = document.createElement('div')scrollDiv.className = 'modal-scrollbar-measure'this.$body.append(scrollDiv)var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidththis.$body[0].removeChild(scrollDiv)return scrollbarWidth}// MODAL PLUGIN DEFINITION// =======================function Plugin(option, _relatedTarget) {/* **合并option判断data  data --> bs.modal如果不存在 则创建 Modal 实例如果 option ==== string否则* */// 参数 和 按钮return this.each(function () {var $this   = $(this) // 弹框层var data    = $this.data('bs.modal') // undefinedvar options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)// if (!data) 和 if (typeof option == 'string')  每次只能执行一个// 如果 !data  创建 modal 实例if (!data) $this.data('bs.modal', (data = new Modal(this, options)))// data --> Modal 的实例对象// $this.data() {bs.modal: Modal}// 执行modal 实例之后  执行以下代码// option 在再次点击按钮的时候 为stringif (typeof option == 'string') data[option](_relatedTarget)else if (options.show) {data.show(_relatedTarget)} // 去执行 show 方法// data.show  dataw为 Modal实例// 所以 去执行show的prototype(把按钮传到show方法)})}// 防止冲突var old = $.fn.modal              // 保留(冲突中)老的那一个 这里是自定义的button插件$.fn.modal             = Plugin   // 使得 $("#btn1").button() 可以调用boot定义的button插件 这里是boot定义的button插件$.fn.modal.Constructor = Modal// MODAL NO CONFLICT// =================$.fn.modal.noConflict = function () {$.fn.modal = old // undefined = undefinedreturn this}// MODAL DATA-API// ==============// $.fn.modal.noConflict()// 入口$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { // 点击buttons时/* *  收集 option 对象或者 ‘toggle’ --> 根据是否存在 bs.modal判断执行show hide 事件执行 Plugin 函数*/var $this   = $(this) // jquery 实例对象 ——> 按钮var href    = $this.attr('href') // 得到 href属性值// 弹出框// ??????? 仍然不知道这个正则是干什么的啊var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7// 目标弹出框  button按钮上的data-target属性 或者是 存在href 并且 href  remote ?????var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())// option  如果弹出框缓存了 data-bs.modal 那么 option 是 toggle  否则  $.extend(), 这个扩展方法 是 把 参数 2 3 和 参数1合并;// 如果是a标签，则阻止a标签的默认行为if ($this.is('a')) e.preventDefault()// 先执行call 再执行show prototype  最后执行 one$target.one('show.bs.modal', function (showEvent) {if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown$target.one('hidden.bs.modal', function () {$this.is(':visible') && $this.trigger('focus')})})// arguments1  $target  把plugin 中的this 指向 $target(弹框),// option, this  仅仅是参数Plugin.call($target, option, this)})}(jQuery);

读bootstrap modal.js相关推荐

Bootstrap插件（一）——模态框（modal.js）
前言:这一片文章我们将对bootstrap的modal模态框进行学习,学习他是如何绑定到一个按钮上去点击显示,学习模态框的简单数据配置,学习模态框的使用方式,事件,方法.参数等:下面是modal的内容 ...
如何使用Bootstrap Modal和jQuery AJAX创建登录功能
by Yogi 由瑜伽士 Bootstrap Modal is an excellent way to create a Login form on your website. In this tut ...
Bootstrap modal使用及点击外部不消失的解决方法
这篇文章主要为大家详细介绍了Bootstrap modal使用及点击外部不消失的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Bootstrap modal使用及点击 ...
bootstrap modal 一闪
原因可能是因为bootstrap.min.js(bootstrap.js) 和modal.js重复引用导致的,而且重复引用还会引致bootstrap的js事件失效. 转载于:https://www.c ...
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
js获取日期选择器值html,利用Query+bootstrap和js两种方式实现日期选择器
前言所谓日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的 ...
玩转Bootstrap（JS插件篇）
模态弹出框一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js ...
bootstrapdatetimepicker 隐藏触发 bootstrap modal隐藏事件
如果在bootstrap modal 里面使用 bootstrapdatetimepicker ,并且写一个modal的隐藏方法清空所有文本. 那么当你选择日期之后会发现modal框里所有的文本框的值 ...
分页浏览的导航栏Bootstrap和js两种方法
1,Bootstrap写法: 效果图: 代码: <!doctype html> <html lang="en"><head><meta c ...

读bootstrap modal.js

读bootstrap modal.js相关推荐

最新文章

热门文章