前端知识笔记（二十）———简易弹窗制作

这是自己闲来无事写的一个小弹窗，只需一个div标签，里面写入弹窗想要显示的内容即可，简单易懂，一看就会

HTML部分只需要写个div标签命个名，把弹窗内容写上就可以了

使用css添加样式

弹窗名{
   /* 弹窗位置自行调整 */
	position: fixed;
	top: 20vh;
	left: 90vh;

	/* 颜色自行调整 */
	background-color: #056774;

	/* 弹窗宽高自行调整 */
	width: 14vw;
	height: 8vh;

	/* 弹窗内容居中显示 */
	display: flex;
	align-items: center;
	justify-content: center;

	/* 弹窗内容样式自行调整 */
	color: #ffffff;
	font-weight: 800;

	/* 弹窗样式美化 */
	border-radius: 1vh;
	border: 0.2vh #ffffff solid;
	box-shadow: 1vh 1vh 10vh #011B29 inset;

	/* 弹窗显示方式 */
	opacity: 0;
	transition: 0.3s;
}

成品显示（自我感觉良好）：