解读Bootstrap组件源码的关键技巧

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <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" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;

  &.fade {
    transition: opacity 0.15s linear;
  }

  &.show {
    display: block;
  }
}

var Modal = function (element, options) {
  this.options = options
  this.$body = $(document.body)
  this.$element = $(element)
  this.$dialog = this.$element.find('.modal-dialog')
  this.$backdrop = null
  this.isShown = null
  this.originalBodyPad = null
  this.scrollbarWidth = 0
  this.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 = '4.6.0'

Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150

Modal.DEFAULTS = {
  backdrop: true,
  keyboard: true,
  focus: true,
  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.checkScrollbar()
  this.setScrollbar()
  this.$body.addClass('modal-open')

  this.escape()
  this.resize()

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

  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(0)

    that.adjustDialog()

    if (transition) {
      that.$element[0].offsetWidth // force reflow
    }

    that.$element.addClass('show')

    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)
  })
}