bootstrap modal.js解析

modal.css

html {  font-family: sans-serif;  -webkit-text-size-adjust: 100%;      -ms-text-size-adjust: 100%;}body {  margin: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {  display: block;}audio, canvas, progress, video {  display: inline-block;  vertical-align: baseline;}audio:not([controls]) {  display: none;  height: 0;}[hidden],template {  display: none;}a {  background-color: transparent;}a:active,a:hover {  outline: 0;}abbr[title] {  border-bottom: 1px dotted;}b, strong {  font-weight: bold;}dfn {  font-style: italic;}h1 {  margin: .67em 0;  font-size: 2em;}mark {  color: #000;  background: #ff0;}small {  font-size: 80%;}sub, sup {  position: relative;  font-size: 75%;  line-height: 0;  vertical-align: baseline;}sup {  top: -.5em;}sub {  bottom: -.25em;}img {  border: 0;}svg:not(:root) {  overflow: hidden;}figure {  margin: 1em 40px;}hr {  height: 0;  -webkit-box-sizing: content-box;     -moz-box-sizing: content-box;          box-sizing: content-box;}pre {  overflow: auto;}code, kbd, pre, samp {  font-family: monospace, monospace;  font-size: 1em;}button, input, optgroup, select, textarea {  margin: 0;  font: inherit;  color: inherit;}button {  overflow: visible;}button, select {  text-transform: none;}button,html input[type="button"],input[type="reset"],input[type="submit"] {  -webkit-appearance: button;  cursor: pointer;}button[disabled],html input[disabled] {  cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner {  padding: 0;  border: 0;}input {  line-height: normal;}input[type="checkbox"],input[type="radio"] {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;  padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {  height: auto;}input[type="search"] {  -webkit-box-sizing: content-box;     -moz-box-sizing: content-box;          box-sizing: content-box;  -webkit-appearance: textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {  -webkit-appearance: none;}fieldset {  padding: .35em .625em .75em;  margin: 0 2px;  border: 1px solid #c0c0c0;}legend {  padding: 0;  border: 0;}textarea {  overflow: auto;}optgroup {  font-weight: bold;}table {  border-spacing: 0;  border-collapse: collapse;}td, th {  padding: 0;}/**********************************************************//**********************************************************//**********************************************************/.fade {  opacity: 0;  -webkit-transition: opacity .15s linear;       -o-transition: opacity .15s linear;          transition: opacity .15s linear;}.fade.in {  opacity: 1;}.modal-open {  overflow: hidden;}.modal {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1040;  display: none;  overflow: hidden;  -webkit-overflow-scrolling: touch;  outline: 0;}.modal.fade .modal-dialog {  -webkit-transition: -webkit-transform .3s ease-out;       -o-transition:      -o-transform .3s ease-out;          transition:         transform .3s ease-out;  -webkit-transform: translate(0, -25%);      -ms-transform: translate(0, -25%);       -o-transform: translate(0, -25%);          transform: translate(0, -25%);}.modal.in .modal-dialog {  -webkit-transform: translate(0, 0);      -ms-transform: translate(0, 0);       -o-transform: translate(0, 0);          transform: translate(0, 0);}.modal-open .modal {  overflow-x: hidden;  overflow-y: auto;}.modal-dialog {  position: relative;  width: auto;  margin: 10px;}.modal-content {  position: relative;  background-color: #fff;  -webkit-background-clip: padding-box;          background-clip: padding-box;  border: 1px solid #999;  border: 1px solid rgba(0, 0, 0, .2);  border-radius: 6px;  outline: 0;  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}.modal-backdrop {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: #000;}.modal-backdrop.fade {  filter: alpha(opacity=0);  opacity: 0;}.modal-backdrop.in {  filter: alpha(opacity=50);  opacity: .5;}.modal-header {  min-height: 16.42857143px;  padding: 15px;  border-bottom: 1px solid #e5e5e5;}.modal-header .close {  margin-top: -2px;}.modal-title {  margin: 0;  line-height: 1.42857143;}.modal-body {  position: relative;  padding: 15px;}.modal-footer {  padding: 15px;  text-align: right;  border-top: 1px solid #e5e5e5;}.modal-footer .btn + .btn {  margin-bottom: 0;  margin-left: 5px;}.modal-footer .btn-group .btn + .btn {  margin-left: -1px;}.modal-footer .btn-block + .btn-block {  margin-left: 0;}.modal-scrollbar-measure {  position: absolute;  top: -9999px;  width: 50px;  height: 50px;  overflow: scroll;}@media (min-width: 768px) {  .modal-dialog {    width: 600px;    margin: 30px auto;  }  .modal-content {    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);  }  .modal-sm {    width: 300px;  }}@media (min-width: 992px) {  .modal-lg {    width: 900px;  }}.modal-footer:before,.modal-footer:after {  display: table;  content: " ";}.modal-footer:after {  clear: both;}

modal.js

+function ($) {    'use strict';    function transitionEnd() {        var el = document.createElement('bootstrap')        var transEndEventNames = {            WebkitTransition : 'webkitTransitionEnd',            MozTransition    : 'transitionend',            OTransition      : 'oTransitionEnd otransitionend',            transition       : 'transitionend'        }        // el.style.transition        // el.style.WebkitTransition        // el.style.MozTransition        // el.style.OTransition        for (var name in transEndEventNames) {            if (el.style[name] !== undefined) {                return { end: transEndEventNames[name] }            }        }        return false // explicit for ie8 (  ._.)    }    // http://blog.alexmaccaw.com/css-transitions    $.fn.emulateTransitionEnd = function (duration) {        var called = false        var $el = this        $(this).one('bsTransitionEnd', function () { called = true })        var callback = function () { if (!called) $($el).trigger($.support.transition.end) }        setTimeout(callback, duration)        return this    }    $(function () {        $.support.transition = transitionEnd()        if (!$.support.transition) return        $.event.special.bsTransitionEnd = {            bindType: $.support.transition.end,            delegateType: $.support.transition.end,            handle: function (e) {            if ($(e.target).is(this))                 return e.handleObj.handler.apply(this, arguments)            }        }    })}(jQuery);+(function($){    var Modal = function(element,options){        this.options = options;        this.$body = $(document.body);        this.$element = $(element);            this.$backdrop = null;        this.isShown = null;        //模态框是否显示        this.scrollbarWidth = 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.0";    Modal.TRANSITION_DURATION = 300;        //过渡时间    Modal.BACKDROP_TRANSITION_DURATION = 150;   //背景过渡时间    Modal.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;        var e = $.Event("show.bs.modal",{relatedTarget:_relatedTarget});        // 打开弹框前触发事件        this.$element.trigger(e);        // 如果已经打开（或者曾经被阻止过）则退出        if(this.isShown || e.isDefaultPrevented()) return;        this.isShown = true;        // 获取滚动条宽度 this.scrollbarWidth        this.checkScrollbar();        // 设置overflow: hidden        this.$body.addClass("modal-open");        // 设置body内边距        this.setScrollbar();        // 设置esc按钮事件 调用hide方法        this.escape();        // 为包含data-dismiss="modal"属性的元素注册关闭模态框(比如点x按钮,就隐藏模态框功能)        this.$element.on("click.dismiss.bs.modal","[data-dismiss='modal']",$.proxy(this.hide,this));        //backdrop函数:背景逻辑, 回调函数功能:显示model逻辑        this.backdrop(function(){            // 是否支持动画 && model的元素包含fade class            var transition = $.support.transition && that.$element.hasClass("fade");            // model没有父元素 则将model附加到body上            if(!that.$element.parent().length){                that.$element.appendTo(that.$body)            }            // 将model元素设置成显示(jq.show方法), 并移动到最上面            that.$element.show().scrollTop(0);            // 动画效果准备            if(transition){                that.$element[0].offsetWidth            }            that.$element.addClass("in").attr("aria-hidden",false);            //解绑并为document对象注册focusin.bs.modal事件, 具体处理是:如果不是model产生的,就触发model的facus事件            //简单的说,就是获取焦点            that.enforceFocus();            //准备触发shown.bs.modal事件            var e = $.Event("shown.bs.modal",{ relatedTarget: _relatedTarget});            //有动画,就动画完成后触发focus事件和shown.bs.modal事件            $.support.transition?that.$element.find(".modal-dialog").one("bsTransitionEnd",function(){                that.$element.trigger("focus").trigger(e)            }).emulateTransitionEnd(300):that.$element.trigger("focus").trigger(e);        });    }    // 关闭弹框    Modal.prototype.hide = function(e){        if(!!e) e.preventDefault();        // 绑定hide.bs.modal事件并触发        e = $.Event("hide.bs.modal");        this.$element.trigger(e);        // 如果已经hide了 || 调用hide事件时阻止了默认行为 则返回        if(!this.isShown || e.isDefaultPrevented()) return;        this.isShown = false;        // 解除esc按键事件        this.escape();        // 解除document对象的focusin.bs.modal事件绑定, (对应show中enforceFocus)        $(document).off("focusin.bs.modal");        // 移除class in  解绑click关闭模态框事件        this.$element.removeClass("in").attr("aria-hidden",true).off("click.dismiss.bs.modal");        // 动画,然后调用hideModal方法(加上背景div的关联处理)        $.support.transition&&this.$element.hasClass("fade")?        this.$element.one("bsTransitionEnd",$.proxy(this.hideModal,this))        .emulateTransitionEnd(300):this.hideModal();    }    //解绑并为document对象注册focusin.bs.modal事件, 具体处理是:如果不是model产生的,就触发model的facus事件    // $element获取焦点    Modal.prototype.enforceFocus = function(){        $(document).off("focusin.bs.modal").on("focusin.bs.modal",$.proxy(function(e){            if(this.$element[0] !== e.target && !this.$element.has(e.target).length){                this.$element.trigger("focus");            }        },this))    }    // esc事件     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    Modal.prototype.hideModal = function(){        var that = this;        // 调用jq的隐藏函数 hide()        this.$element.hide();        // 隐藏背景         this.backdrop(function(){            // 撤销为body加上的class modal-open （overflow:hidden）            that.$body.removeClass("modal-open");            // 还原 为了设置滚动条(使滚动条不可见) body加上的padding-right            that.resetScrollbar();            // 触发hidden.bs.modal事件            that.$element.trigger("hidden.bs.modal");        });    }    // 移除背景div modal-backdrop    Modal.prototype.removeBackdrop = function(){        this.$backdrop && this.$backdrop.remove();        this.$backdrop = null;    }    // callback为具体的model的隐藏或显示逻辑,backdrop负责背景div逻辑    Modal.prototype.backdrop = function(callback){        var that = this;        var animate = this.$element.hasClass("fade")?"fade":"";        if(this.isShown && this.options.backdrop){            //$.support.transition  { end: "webkitTransitionEnd"}            var doAnimate = $.support.transition && animate;            this.$backdrop = $('<div class="modal-backdrop '+ animate +'"></div>')                                .prependTo(this.$element)                                .on("click.dismiss.bs.modal",$.proxy(function(e){  //绑定click.dismiss.bs.modal事件                                    if(e.target !== e.currentTarget) return;                                    // 如果传入option backdrop参数是static 则为静态背景获取焦点 否则隐藏模态框                                    this.options.backdrop == "static"?this.$element[0].focus().call(this.$element[0]):this.hide.call(this);                                },this))            // 准备动画            if(doAnimate) this.$backdrop[0].offsetWidth            this.$backdrop.addClass("in");            if(!callback) return;            //背景div有动画就动画后回调,没有直接回调, 回调是指(显示或关闭逻辑)            doAnimate?this.$backdrop.one("bsTransitionEnd",callback).emulateTransitionEnd(150):callback();        }else if(!this.isShown && this.$backdrop){ //关闭modal框            this.$backdrop.removeClass("in");            //回调函数: 移除遮罩div后回调            var callbackRemove = function(){                that.removeBackdrop()                callback && callback()            }            // 有动画则调用动画            $.support.transition?this.$element.one("bsTransitionEnd",callbackRemove).emulateTransitionEnd(150):callbackRemove();        }else if(callback){            callback();        }    }     Modal.prototype.checkScrollbar = function(){        this.scrollbarWidth = this.measureScrollbar();    }    // 设置body内边距    Modal.prototype.setScrollbar = function(){        var bodyPad = parseInt((this.$body.css("padding-right") || 0),10);        if(this.scrollbarWidth) this.$body.css("padding-right",bodyPad+this.scrollbarWidth);    }    // 还原设置的body内边距    Modal.prototype.resetScrollbar = function(){        this.$body.css('padding-right', '');    }    // 获取滚动条宽度    Modal.prototype.measureScrollbar = function(){        // 如果有滚动条 window.innerWidth >= document.body.clientWidth        // 如果没有滚动条 window.innerWidth = document.body.clientWidth        //如果没有滚动条        if(document.body.clientWidth >= window.innerWidth) return 0;            // 如果有滚动条 创建一个有滚动条的div 获取滚动条宽度        var scrollDiv = document.createElement('div');        scrollDiv.className = "modal-scrollbar-measure";        this.$body.append(scrollDiv);        var scrollbarWidth  = scrollDiv.offsetWidth - scrollDiv.clientWidth;        // 移除刚才创建的div        this.$body[0].removeChild(scrollDiv);        return scrollbarWidth;    }    function Plugin(option,_relatedTarget){        // _relatedTarget目标target <a class="btn btn-default" data-toggle="modal" data-target="#delete">xx</a>        return this.each(function(){            var $this = $(this);            var data = $this.data('bs.modal');            var options = $.extend({},Modal.DEFAULTS,$this.data(),typeof option =='object' && option);            if(!data){                $this.data("bs.modal",(data = new Modal(this,options)));            }            if(typeof option == "string"){  //点击按钮 toggle hide show                data[option](_relatedTarget);                // 未知option data表示new Modal                // data[option]表示 Modal.show /Modal.hide /Modal.toggle            }else if(options.show){ //初始化为显示 则显示                data.show(_relatedTarget)            }        });    }    var old = $.fn.modal;    $.fn.modal = Plugin;    $.fn.modal.Constructor = Modal;    $.fn.modal.noConflict = function(){        $.fn.modal = old;        return this;    }    $(document).on("click.bs.modal.data-api","[data-toggle='modal']",function(e){        var $this = $(this);        var href = $this.attr("href");        // 获取目标模态框id        var $target = $($this.attr("data-target") || (href&&href.replace(/.*(?=#[^\s]+$)/,'')));        /****            $this.data()获取 data-toggle="modal" data-target="#delete"            $this.data() = Object{                target : "#delete",                toggle : "modal"            }            { remote: !/#/.test(href) && href } -> {remote: false/href}        ****/        var option = $target.data("bs.modal")?"toggle":$.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data());        if($this.is("a")) e.preventDefault();        $target.one("show.bs.modal",function(showEvent){            //如果前面注册的事件处理器一定调用了preventDefault方法,就不会显示,后面也就不绑定隐藏事件了,所以这里也不要处理了            if(showEvent.isDefaultPrevented()) return;            $target.one("'hidden.bs.modal",function(){                $this.is(":visible") && $this.trigger("focus");            });        });        Plugin.call($target,option,this);    });})(jQuery)html:```html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="css/modal.css"></head><body>    <a class="btn btn-default" data-toggle="modal" data-target="#delete"  href="#ccc">删除</a>    <div class="modal fade" id="delete"  tabindex="-1">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">                    <span aria-hidden="true">&times;</span></button>                </div>                <div class="modal-body"></div>                <div class="modal-footer">                    <button type="button" data-dismiss="modal">取消</button>                    <button type="button">确定</button>                </div>            </div>        </div>    </div>    <script src="js/jquery-1.12.3.min.js"></script>    <script src="js/modal.js"></script>    <script>        $(function(){            $('#delete').modal();            // $('#delete').modal({backdrop: "static"});            // $('#delete').on("show.bs.modal",function(e){ console.log("show.bsssss") });            // $('#delete').on("shown.bs.modal",function(e){ console.log("shown.bsssss") });            // $('#delete').on('hide.bs.modal', function (e) {              //  e.preventDefault();            //  console.log("hide.bssss")             // })        })    </script></body></html>

原地址：https://my.oschina.net/haogrgr/blog/323079?p=1