主要使用到：:target伪类，::before 、::after伪元素  以及display: flex;盒子用来居中，最后用position: fixed;绝对定位来让弹窗固定

<a href="#example1">立即下载</a>

	<div class="popBox" id="example1">
	<div class="khbox">
		<a href="#" class="close" ></a>
		<span id="boxtitle">账号登录</span>
		<form action="#" enctype="multipart/form-data" method="post" class="tc_form"> 
			<input type="text" name="contacts" class="tp2" id="name" value="" placeholder="账号">
			<input type="text" name="mobile" class="tp2" id="phone" value="" placeholder="请输入您的密码">
				<p class="tc_p">xxx保障您的信息不会泄露。</p>
			<input type="submit" name="submit" value="立 即 注 册" class="khbtn" >
		</form>
	</div>
</div>


css:

/*弹窗遮罩层*/
        .popBox::before {
        	content: "";
        	cursor: default;
        	background-color: rgba(173, 173, 173, 0.66);
        	position: fixed;
        	left: 0;
        	right: 0;
        	top: 0;
        	bottom: 0;
        }

        /*关闭弹窗*/
        .popBox {
        	display: none;
        }

        /*打开弹窗*/
        .popBox:target {
        	align-items: center;
        	display: flex;
        	justify-content: center;
        	position: fixed;
        	left: 0;
        	right: 0;
        	top: 0;
        	bottom: 0;
        }

        /*设置弹窗内容*/
        .popBox .khbox {
        	background-color: rgb(255 255 255 / 76%);
        	border-radius: 5px;
        	padding: 1.5rem;
        	position: relative;
        	width: 25rem;
        }

        /*关闭按钮*/
        .popBox .close {
        	display: block;
        	position: relative;
        }

        .popBox .close::after {
        	align-items: center;
        	color: black;
        	content: "×";
        	display: flex;
        	font-size: 2.25rem;
        	justify-content: center;
       	 position: absolute;
      	  right: -2rem;
     	   top: -2.14rem;
        	height: 2rem;
        	width: 2rem;
        	z-index: 2;
        }

        span#boxtitle {
        	font-weight: bold;
      	  text-align: center;
        	width: 100%;
     	   height: auto;
        	display: inline-block;
        	font-size: 25px;
        }

        form.tc_form {
        	margin-top: 15px;
        	text-align: center;
        }

        input.tp2 {
        	width: 60%;
        	height: 35px;
        	margin-bottom: 15px;
        	padding-left: 5px;
        	background-color: #f2f2f2;
      	  border: 1px solid #bdbdbd;
        }

        input.khbtn {
      	  width: 60%;
        	height: 48px;
        	margin-top: 10px;
        }

        input.khbtn:hover {
        	color: white;
        	background-color: #0276e7;
        	border: 1px solid;
        	font-weight: bold;
        }

最后为了