Html
    Css
    Js

    
                        
#mask {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10;
	background-color:#000;
	background:rgba(0,0,0,0.8);
}
.popup {
	width:80%;
	background:#fff;
	border-radius:.5rem;
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:999;
	padding:1rem;
}
.close {
	width:3rem;
	height:3rem;
	position:absolute;
	left:50%;
	top:-5rem;
	transform:translate(-50%,0);
}
.input {
	margin-top:1rem;
}
.phone input {
	width:100%;
	height:3rem;
	margin:0 auto;
	line-height:3rem;
	background:#f1f1f1;
	border-radius:.5rem;
	padding:0 1rem;
}
.code {
	overflow:hidden;
}
.code input {
	float:left;
	width:45%;
	height:3rem;
	margin:0 auto;
	line-height:3rem;
	background:#f1f1f1;
	border-radius:.5rem;
	padding:0 1rem;
}
.code button {
	float:right;
	width:40%;
	height:3rem;
	line-height:3rem;
	border:none;
	background:#654dd7;
	border-radius:.5rem;
	color:#fff;
	box-shadow:0 0 5px #654dd7;
}
.yanzheng {
	width:100%;
	height:3rem;
	line-height:3rem;
	border:none;
	background:-webkit-linear-gradient(left,#745bfb,#654dd7);
	background:-o-linear-gradient(right,#745bfb,#654dd7);
	background:-moz-linear-gradient(right,#745bfb,#654dd7);
	background:linear-gradient(to right,#745bfb,#654dd7);
	color:#fff;
	border-radius:5rem;
	box-shadow:0 0 5px #654dd7;
	margin-top:2rem;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

移动端手机号验证码弹窗(原创)

更新时间:2022-04-17 23:10:38

直接复制过去就可以用

0