Bootstrap简单认识之Modal组件

Modal（模态框）组件

一、简介

1. 不支持多个模态框同时存在
2. 一般作为文档body元素的直接子元素存在(不要受到其他元素的影响，假如把模态框元素放在一个具有 transform 属性的父元素里，模态框的 position:fixed 属性就会被严重影响)
3. autofocus 在模态框无作为

二、样式

此版本的Bootstrap大量使用了flex布局

• 在 .modal-content 中，使用了 flex-direction: column，使得 .modal-header、.modal-body、.modal-footer纵向排列
• 在 .modal-header 中，使用了 display: flex; align-items:center 使得内容纵向居中，使用了 justify-content:space-between 使得两端对齐，项目之间的间隔都相等（主要就是title以及关闭按钮）
• 在 .modal-body 中，作为flex item使用了属性 flex:1 1 auto，第一个值为 flex-grow，在 modal-content 中占据足够大的空间（因为header和footer的flex-grow都为默认值0）； 第二个值为 flex-shrink，默认都为1；第三个值为 flex-basis，定义在分配多余空间之前项目占据主轴(这里的 .modal-content 的方向是 column，所以主轴是纵向)的空间
• 在 .modal-footer 中，使用了 display: flex;align-items: center; 使得内容纵向居中，使用了 justify-content: flex-end; 使得每个flex item 向右靠拢(默认放在footer的是一些按钮啥的)

三、脚本

Modal组件的脚本一般用于控制Modal的显示与隐藏，所以可以想象主要就是show和hide函数
下面是Modal组件的代码梗概：

class Modal {

  constructor(element, config) {
    // 配置属性，包括backdrop(是否有背景阴影层)，keyboard(是否可用键盘控制esc键),show(是否需要在初始化的同时弹出Modal)，focus(让_element元素focus?不理解)
    this._config              = this._getConfig(config)
    // 这个元素并不是那个弹出来的框框, 而是modal-dialog类元素的更外一层, 即Modal的最外层(注意，也不是背景层, 背景层是动态添加在body底部的元素)
    this._element             = element
    // 这个就是指弹出来的框框元素
    this._dialog              = $(element).find(Selector.DIALOG)[0]
    // 背景阴影层元素
    this._backdrop            = null
    // 是否弹框状态
    this._isShown             = false
    // 原页面是否有滚动条
    this._isBodyOverflowing   = false
    // 是否忽略_element的click事件(hide Modal)
    this._ignoreBackdropClick = false
    // 是否正在执行动画
    this._isTransitioning     = false
    // 页面原始body的padding-right值
    this._originalBodyPadding = 0
    // 浏览器滚动条宽度
    this._scrollbarWidth      = 0
  }

  // public
  // 弹出或是隐藏Modal
  toggle(relatedTar