function($){

        var Modal = function(){}  //构造器

        Modal.prototype = function(){} //构造器的原型

        function ..(){}  //自定义方法

        $.fn.modal = function(){} //在jQuery对象上自定方法

        $.fn.modal.defaults = {} //设置默认属性

        $.fn.modal.Constructor = Modal //重置构造器名

        $(function(){})   //初始化

    }(window.jQuery)

<a class="btn" data-toggle="modal" href="#myModal" >点击触发对话框</a>

<div class="modal" id="myModal">

      <div class="modal-header">

        <a class="close" data-dismiss="modal">×</a>

        <h3>对话框标题</h3>

      </div>

      <div class="modal-body">

        <p>对话框内容</p>

      </div>

      <div class="modal-footer">

      <a href="#" class="btn" data-dismiss="modal">关闭</a>

      <a href="#" class="btn btn-primary" data-dismiss="modal">保存更新</a>

  </div>

</div>

$(function () {

     /*

     * 在所有有data-toggle='modal'属性的标签上帮上click事件，一般为a标签

     * /.*(?=#[^\s]+$)/表示如果匹配成功将#之前的信息删除

     * 对于jQuery对象，比如a标签有data-xx类型的，在其data方法中都可以显示

     * 将a标签data-target指向的或是href的锚点指向的元素传入modal方法里

     * */

    $('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)

    })

  })

$.fn.modal = function ( option ) {

    return this.each(function () {

      var $this = $(this)

        , data = $this.data('modal')

        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)

      if (!data) $this.data('modal', (data = new Modal(this, options)))//为modal绑定对象

      if (typeof option == 'string') data[option]()

      else if (options.show) data.show()

    })

  }

/*

  * 构造器，为所有data-dismiss='modal'属性的标签绑定原型上的hide方法

  * */

  var Modal = function ( content, options ) {

    this.options = options

    this.$element = $(content)

      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))

  }

show -> escape -> backdrop

hide ->escape -> hideModal -> backdrop

    , show: function () {

        var that = this

        if (this.isShown) return

        $('body').addClass('modal-open')//给body加上modal-open类

        this.isShown = true//将isShown属性设置成true

        this.$element.trigger('show');//没理解

        escape.call(this)//加上键盘事件

        backdrop.call(this, function () {

          var transition = $.support.transition && that.$element.hasClass('fade')

          //console.log(that.$element);

          /*

          * 插入弹出层

          * */

          !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position

          that.$element

            .show()//jQuery方法显示

          if (transition) {

            that.$element[0].offsetWidth // force reflow

          }

          that.$element.addClass('in')

          transition ?

            that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :

            that.$element.trigger('shown')

        })

      }

/*

  * 生成遮罩层，并且控制遮罩层的显示或删除

  * */

  function backdrop( callback ) {

          var that = this

      , animate = this.$element.hasClass('fade') ? 'fade' : ''

    if (this.isShown && this.options.backdrop) {

      var doAnimate = $.support.transition && animate

      //console.log(doAnimate);

      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')

        .appendTo(document.body)//遮罩层，让弹出框显示时，背景被遮罩，此时为透明的

      if (this.options.backdrop != 'static') {

        this.$backdrop.click($.proxy(this.hide, this))

      }

      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

      this.$backdrop.addClass('in')//加入in类，显示遮罩层

      doAnimate ?

        this.$backdrop.one($.support.transition.end, callback) :

        callback()

      //打开时，执行callback()回调

    } else if (!this.isShown && this.$backdrop) {

      this.$backdrop.removeClass('in')//删除in，遮罩层透明

      $.support.transition && this.$element.hasClass('fade')?

        this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :

        removeBackdrop.call(this)

        //一般执行removeBackdrop()函数

    } else if (callback) {

      callback()

    }

  }

hide: function ( e ) {

        e && e.preventDefault()

        if (!this.isShown) return

        var that = this

        this.isShown = false

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

        escape.call(this)//关闭按键事件

        this.$element

          .trigger('hide')

          .removeClass('in')//jQuery方法，将弹出框隐藏，并将div的class去in

        $.support.transition && this.$element.hasClass('fade') ?

          hideWithTransition.call(this) :

          hideModal.call(this)

      }

function hideModal( that ) {

    this.$element

      .hide() //删除效果更好

      .trigger('hidden')

    backdrop.call(this)

  }

/*

  * 清除遮罩层

  * */

  function removeBackdrop() {

    this.$backdrop.remove()

    this.$backdrop = null

  }