Bootstrap插件modal源码的学习

使用说明

两部分需要定义：

• 模态框的触发元素，需要data-toggle="modal"，以便被初始化；需要data-target="#example"或href指定模态框
• 模态框，模态框容器需要与data-target对应的类或id，其内容部分可以用"modal-content"的类来美化样式

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">
  触发按钮
</button>
<div class="modal" id="myModal">
  <div class="modal-content">
    <div class="modal-header">
      title
    </div>
    <div class="modal-body">
      body
    </div>
  </div>
</div>

核心思想

1. 页面完成加载后，为所有含有data-toggle="modal"的元素绑定点击事件
2. 模态框出现的逻辑：先出现遮罩层，再出现模态框
   • 为body增加"modal-open"类，作用是给body增加overflow：hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式
   • 调用dropback函数，变量shown为true，所以插入出现遮罩层（若遮罩层需要过渡，过渡的逻辑也在这里）
   • 在传给dropback的回调里（即完成遮罩层出现后），调用$el.show()方法使模态框出现（display:block），再增加"in"类使他过渡的出现
3. 模态框的隐藏逻辑：先隐藏模态框，再隐藏遮罩层
   • 先去除"in"类，使模态框opacity变为0
   • 在过渡效果的完成后用$el.hide()隐藏模态框
   • 调用dropback函数，变量shown为false，所以移除遮罩层
   • 在出给dropback的回调里（即完成遮罩层的隐藏后），清除"modal-open"类

初始化

为触发元素绑定点击事件

// 在初始化时为含data-toggle属性的元素绑定点击事件
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
  var $this   = $(this)
  var href    = $this.attr('href')
  var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
  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) {
    if (showEvent.isDefaultPrevented()) ret