Html
    Css
    Js

    
                        
body {
	margin:0;
	max-width:750px;
	max-height:1334px;
	margin:auto;
	position:relative;
}
a {
	text-decoration:none;
	color:#000;
}
.d {
	width:100%;
	height:940px;
	background:#4DDB9F;
	color:white;
	text-align:center;
	line-height:600px;
	font-size:20px;
	font-weight:600;
	letter-spacing:5px;
	/*字间距*/
}
.tishi {
	position:absolute;
	z-index:9999;
	top:0;
	left:0;
	background:rgba(0,0,0,0.5);
	width:100%;
	height:100%;
	overflow:hidden;
	display:none;
}
.tishi_1 {
	width:300px;
	height:180px;
	margin:auto;
	text-align:center;
	line-height:140px;
	/*会影响子集链接里面的样式*/
				background:white;
	margin:40% auto;
	border-radius:10px;
	overflow:hidden;
	font-size:20px;
	/*会影响子集链接里面的样式*/
}
.xs {
	position:absolute;
	z-index:2px;
	top:700px;
	left:calc(50% - 100px);
	width:200px;
	height:60px;
	border-radius:30px;
	background:#FFAE00;
	font-size:18px;
	color:white;
	border:0px;
	cursor:pointer;
	/*鼠标变成手形状*/
}
.yc {
	border:0px;
	display:block;
	height:40px;
	width:150px;
	background:#4A9ADC;
	color:white;
	font-size:16px;
	cursor:pointer;
	/*鼠标变成手形状*/
				float:left;
	/*为了使的能跟马上领取按钮并列*/
}
.lianjie {
	background:#DA72F1;
	display:block;
	height:40px;
	width:150px;
	color:white;
	float:left;
	line-height:40px;
	font-size:16px;
}
.xs2 {
	position:absolute;
	z-index:2px;
	top:800px;
	left:calc(50% - 100px);
	width:200px;
	height:60px;
	border-radius:30px;
	background:#E965AB;
	font-size:18px;
	color:white;
	border:0px;
	cursor:pointer;
	/*鼠标变成手形状*/
}

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

点击显示弹窗打开,再点击隐藏弹窗关闭

更新时间:2019-08-11 01:10:58

用css+html写的弹窗弹出隐藏功能,保证在新的手都能看懂,有详细标注。

1
      。。。。。0
      2019/8/12 15:20:21