html弹出层

页面需求:点击页面的弹出按钮，页面出现弹出层，点击弹出层之外的 其它区域，弹出层消失，页面恢复原来的状态。

Html部分：

<button type="button" class="popBtn">弹框</button>
		<!-- 弹出层 -->
		<div class="popBox">
			<!-- loading -->
			<div class="loading">
				
			</div>
		</div>
		<!-- 弹出背景》 -->
		<div class="popUpBox">
			
		</div>

CSS部分

*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 10px;
			}
			.popBox{
				width: 6.25rem;
				height: 6.25rem;
				background: white;
				border: 1px solid #FBFBFB;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -3.125rem;
				margin-left: -3.125rem;
				z-index: 2;
				display: none;
				/* display: flex; */
				justify-content: center;
				align-items: center;
			}
			.popBtn{
				width: 3.75rem;
				height: 1.875rem;
				border: none;
				background-color: #007DDB;
			    font-size: 14px;
				color: #fff;
				margin: 0.625rem;
				border-radius: 5px;
				text-align: center;
			}
			.popUpBox{
				width: 100%;
				height: 100%;
				background: silver;
				opacity: 0.8;
				z-index: 1;
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.loading{
				width: 2.5rem;
				height: 2.5rem;
				background: url('./loading.gif');
				background-size: 100%;
			}

JS部分:

<script type="text/javascript">
			$(function(){
				$('.popBtn').on('click',function(){
					$('.popBox').css({
						'display':'flex'
					});
					$('.popUpBox').css({
						'display':'block'
					})
				});
				$('.popUpBox').on('click',function(){
					$('.popBox').css({
						'display':'none'
					});
					$('.popUpBox').css({
						'display':'none'
					})
				})
			})
		</script>

效果:
按钮点击前:

按钮点击后:

点击弹出层外的区域，恢复