CSS 实现模态框效果

封装模态框

1. 首先用<div className='modal'>标签封装需要展示的模态框，放入需要呈现的元素，包括input、select等
2. 在上一层的<div className='modal'>外再嵌套一层<div className='container'>
3. 对className=‘container’添加样式

.container
	background:'rgba(0, 0, 0, 0.6)', //背景颜色黑色半透明
	position:'fixed',//生成绝对定位的元素,相对于浏览器窗口进行定位
	top:0,
	left:0,
	right:0,
	bottom:0,//	对位置进行确定
	zIndex:9,//可以实现覆盖原来背景上的元素，从而无法再操作

4. 对className='modal'添加样式

.modal
	zIndex:99 //覆盖container层，置于最上层
	... //其他的位置调整

总结：container的意义是添加中间层，从而实现背景元素无法操作以及除模态框外，其他地方颜色置黑色半透明的效果。防止模态框被覆盖，则通过z-index的调整，一层盖一层。