Modal(模态框)组件
一、简介
- 不支持多个模态框同时存在
- 一般作为文档body元素的直接子元素存在(不要受到其他元素的影响,假如把模态框元素放在一个具有
transform
属性的父元素里,模态框的position:fixed
属性就会被严重影响) 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