制作一个简单的HTML模态框

在网页中，时常会用到模态框，比如：用bootstrap库中的模态框效果

一个模态框大致分为三个部分，顶部、主体部分和底部，这三个部分放在同一个div（盒子）中

1. 顶部
   顶部主要放标题，和关闭按钮（顶部右上角是个按钮，可以换别的 但是按钮有点击效果），非必须。
2. 主体
   用来存放主要控件，比如你要使用模态框做登录，那么登录主体控件（输入框、提示）就放在主体部分。
3. 底部
   底部主要用来放一些按钮，比如关闭按钮、确定按钮等，按钮大小位置都可以自己决定。非必须。

为了方便理解，就先写HTML代码（暂时不放标题、关闭按钮）

<!--添加模态框-->
<div class="modal-box">
	<!--顶部-->
	<div class="modal-box-top">
	</div>
	<!--主体-->
	<div class="modal-box-content">
	</div>
	<!--底部-->
	<div class="modal-box-bottom">
	</div>
</div>

如上面代码所示，一个模态框最外层是个div，并添加类名modal-box,里面的三个部分也是使用的div，并添加相应的类名。
接下来就是css代码，代码中已经做了很多注解解释了 所以就不多说了，主要注意一下box-sizing: border-box;

/*模态框*/
.modal-box {
/*绝顶定位 相对于当前浏览器*/
	position: fixed;
	width: 20rem;
	/*设置为白色背景  前期可以设置为其他颜色  方便观看*/
	background-color: white;
	top: 0;
	left: 0;
	margin-top: 8rem;
	border-radius: 7px;
	/*解决高度塌陷的问题*/
	overflow: hidden;
	/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
	/*比如在fixed定位中，z-index100大小的会覆盖在50大小的上面*/
	z-index: 111;
	/*用display的话没有物理宽高  便于js控制*/
	/*visibility: hidden;先不要加  否则浏览器不会显示出来，*/
	/*visibility: hidden;*/
}
	
/*小的模态框*/
.modal-min {
	width: 15rem;
}
	
/*大的模态框*/
.modal-max {
	width: 40rem;
}
	
/*模态框顶部*/
.modal-box-top {
/*相对于之前自己的位置定位，这个设置不会影响元素的位置，会影响子元素使用absolute定位 先不管*/
	position: relative;
	/*宽度随父div*/
	width: 100%;
	height: 3rem;
	/*边框线放在下面*/
	border-bottom: 1px solid #cccccc;
	padding: 0.5rem;
	/*使用此属性后 元素宽高固定，边距大小会从原大小中减去，也就是设置边距后元素宽高不表*/
	box-sizing: border-box;
	overflow: hidden;
}
	
/*模态框主体*/
.modal-box-content {
	width: 100%;
	height: 16rem;
	padding: 0.5rem;
	box-sizing: border-box;
	overflow: hidden;
}
	
/*模态框底部*/
.modal-box-bottom {
	width: 100%;
	height: 4rem;
	border-top: 1px solid #cccccc;
	padding: 0.5rem;
	overflow: hidden;
	box-sizing: border-box;
}

这时候一个简单的模态框模型就做出了，然而还不行，上面的代码还没有添加顶部的标题和关闭按钮
修改上面的HTML代码，给顶部添加一个标题和关闭按钮

<!--添加模态框-->
<div class="modal-box">
	<!--顶部-->
	<div class="modal-box-top">
		<div class="modal-box-title">标题</div>
		<!--关闭按钮 &times;会被转义成乘号（×）看上去就是关闭符号-->
		<!--关闭逻辑-->
		<button onclick="modalClose()" class="modal-close">&times;
		</button>
	</div>
	<!--主体-->
	<div class="modal-box-content">
	</div>
	<!--底部-->
	<div class="modal-box-bottom">
	</div>
</div>

添加css代码

/*模态框标题*/
.modal-box-title {
	/*使用浮动此属性可写可不写 浮动元素都会变成块元素*/
    display: block;
    text-align: center;
    font-size: 1.3rem;
    /*右浮动*/
    float: left;
}

/*关闭按钮*/
.modal-close {
	/*绝对定位，相对于 static 定位以外的第一个父元素进行定位*/
    position: absolute;
    /*定位在顶部的右侧*/
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    font-size: 1.5rem;
    background-color: white;
    color: #a5a5a5;
    /*outline: none;*/
}

上面的关闭按钮使用了absolute定位，正好对应了前面顶部div使用了relative定位，
上个效果图吧（覆盖层和位置是我用js实现了，后面会写）

使用js来控制模态框的显示和隐藏（效果就是打开和关闭）
给控件设置点击事件，比如给关闭按钮的点击事件执行 modalClose()函数
还可以使用js来让模态框随浏览器大小变化而变化（自己实现吧 ）
js代码：

//显示模态框
function modalOpen() {
	//获取模态框对象   getElementsByClassName获取到的是一个数组对象
    let modal = document.getElementsByClassName("modal-box")[0];
    //获取浏览器当前宽高
    let documentWidth = window.innerWidth;
    let documentHeight = window.innerHeight;
    //获取模态框宽度
    let modalWidth = modal.offsetWidth;
    //模态框距离浏览器右侧的距离就是（浏览器宽度-模态框宽）/ 2.0
    //注意，需要把结果转为字符串类型
    modal.style.left = ((documentWidth - modalWidth) / 2.0).toString();
    //设置为可见
    modal.style.visibility = "visible";
}

//模态框关闭
function modalClose() {
	//获取模态框
    let modal = document.getElementsByClassName("modal-box")[0];
    //设置为不可见
    modal.style.visibility = "hidden";
}

到这里，一个模态框就做好了
上一个我写的效果图（添加了内容和遮盖层）