单个页面多个按钮调用同一个弹窗，和滚屏展示效果，关闭后，5秒自动弹出滚屏展示！

本文链接：https://blog.csdn.net/cplvfx/article/details/79422987

文件包

http://download.csdn.net/download/cplvfx/10266503

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
        <meta http-equiv="Cache-Control" content="no-siteapp">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/cp_index.css"/> 
		<script src="js/jquery1_7.min.js" type="text/javascript"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script> 
		<title>立即申请1</title> 
	</head>
	<body>
		 
		<!--描述：留言按钮-->
				<div id="cp_liuyan" class="cp_button">立即申请1</div>

				<!--描述：留言按钮-->
				<div id="cp_liuyan" class="cp_button">立即申请2</div>

				<!--描述：留言按钮-->
				<div id="cp_liuyan" class="cp_button">立即申请3</div>


				<!--描述：留言按钮-->
				<div id="cp_liuyan" class="cp_button">立即申请4</div>

				<!--描述：留言按钮-->
				<div id="cp_liuyan" class="cp_button">立即申请5</div>
		 

		  <!-- 查询结果 -->
		  <div class="cp_cxjg">
			  <div class="cp_cxjg_content">
				  <div class="cp_cxjg_title">
					  <div class="fl">查询结果</div>
					  <div class="fr"><img id="cx_bnt" class="anniu" src="img/x.png"></div>
				  </div>
				  <div class="cp_cxjg_body">
				 <ul>
					 <li>
						 <span class="span1">2260查询的</span>
						 <span class="span2">快**家</span>
						 <span class="span3">已被抢注</span>
					</li>
					<li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>

					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li> 
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>

					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li> 
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>
					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li>

					   <li>
							<span class="span1">1860***2260查询的</span>
							<span class="span2">快**家</span>
							<span class="span3">已被抢注</span>
					   </li> 

				 </ul>


				  </div>

				  <script>
				  jQuery(".cp_cxjg").slide({mainCell:".cp_cxjg_body ul",autoPlay:true,effect:"topMarquee",vis:12,interTime:50});
				  </script>
			  </div>

		  </div>
		   <!-- 弹窗 -->
		  <div class="tanchuang_bg"></div>
		  <div class="tanchuang">
			<div class="tanchuang_content">
				<div class="tanchuang_title">
					<div class="txt">免费查询是否被抢注</div>
					<div class="x"><img id="tc_bnt" class="anniu" src="img/x.png"></div>
				</div>
				<div class="tanchuang_body"> 
					<form>
						<input type="text" placeholder="小程序名称">
						<div class="tishi"><img src="img/anquan_icon.png">信息保护中，请放心填写</div>
						<input type="text" placeholder="手机号码">
						<input type="submit" value="立即查看结果">
					</form>
				</div>
			</div>
		  </div>

 

 <script>
 
 //查询关闭
 $("#cx_bnt").click(function(){guanbi(".cp_cxjg",1)});
  //弹窗信息关闭
  $("#tc_bnt").click(function(){
	  guanbi(".tanchuang_bg",0);
	  guanbi(".tanchuang",0);
	  });

//关闭方法
 function guanbi(divclass,timeout){ 
	$(divclass).fadeOut("slow"); 
	if(timeout==1){
	setTimeout(zhanshi, 5000, divclass);//5秒后弹出所关闭的层
}
}
//开启方法
function zhanshi(divclass){
	$(divclass).fadeIn("slow"); 
}

//弹窗
//要操作的class
var tanchuang=".tanchuang";
//获取窗口宽高
var w=innerWidth;
var h=innerHeight;
var tc_w=$(tanchuang).width();
var tc_h=$(tanchuang).height();
$(tanchuang).css({
		"left": (w/2)-(tc_w/2),
		"top": (h/2)-(tc_h/2), 
	});

//弹窗开启
var cp_liuyan=$("div").filter("#cp_liuyan");
cp_liuyan_stringify=JSON.stringify(cp_liuyan);
console.log("cp_liuyan=="+cp_liuyan.length);

	$("div#cp_liuyan").click(function(){
		zhanshi(".tanchuang_bg",0);
		zhanshi(".tanchuang",0);
	});
 </script>

	</body>
</html>

CSS代码

/*
 * 小程序专题
 */
/*初始化CSS样式*/
body{ margin:0; padding:0; font:14px/1.5 "Microsoft YaHei",Tahoma,Arial,"宋体"; color:#333; width: 100%; overflow-x: hidden;
	background-color: #f6f6f6;
} 
form,ul,li,ol,dl,dt,dd,p,i,h1,h2,h3,h4,h5,h6{ margin:0; padding:0}
ul,li{ list-style:none}  img{ border:0} 
a{color:#333; text-decoration:none}   
a.bs:link,a.bs:visited{ color:#fff; text-decoration:none} 
a.bs:hover,a.bs:active{ color:#fff; text-decoration:none}
.cl{ clear:both; height:0; font-size:0; overflow:hidden}
.fl{ float:left !important} .fr{ float:right !important}
  


	/* 按钮 */
	#cp_liuyan{
		cursor: pointer;
	}
.cp_button{
	margin:0 auto;
	margin-top: 40px;
	background: url(../img/button_blue.png);
	overflow: hidden;
	color: #fff;
	width: 282px;
	height:55px;
	font-size: 20px;
	text-align: center;
	line-height:55px;
}

.anniu{
	 cursor: pointer;
}

/* 查询结果 */
.cp_cxjg{
	width: 300px;
	height: 388px;
	border-top: #204eae solid 4px;
	background-color: #fff;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 40%;
	color: #666666;
	font-size: 14px;
	z-index: 100;
}
.cp_cxjg_content{
	width: 270px;
	margin: 0 auto;
}
.cp_cxjg .cp_cxjg_title{
width: 100%;
height: 70px;
line-height: 70px;
font-size: 24px;
font-weight: bold;
color: #333333;
border-bottom: #e3e3e3 solid 1px;
}
.cp_cxjg_body ul li{
	height: 26px;
	line-height: 30px;
	cursor: default;
}
.cp_cxjg_content .cp_cxjg_body{
	height: 300px;
	overflow: hidden;
}
.cp_cxjg_content span{display: inline-block;}
.cp_cxjg_content .span1{
width:130px;
text-align: left;
}
.cp_cxjg_content .span2{
	width:66px;
	text-align: center;
	}
.cp_cxjg_content .span3{
	width:60px;
	text-align:right;
	}

/* 弹窗 */
.tanchuang_bg{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	position: fixed;
	z-index: 200;
	top: 0;
	 display: none;
}
.tanchuang{
	width: 440px;
	height: 350px;
	border-top: #204eae solid 4px;
	background-color: #fff;
	overflow: hidden;
	z-index: 201;
	position: fixed;
	top: 0;  
	display: none;
}
.tanchuang_content{
	width: 380px;
	margin:0 auto; 
}
.tanchuang_title{
	width:100%;
	height: 86px;
	line-height: 86px;
	font-size: 24px;
	font-weight: bold;
	color: #333333; 
	border-bottom: #e3e3e3 solid 1px;
} 
.tanchuang_title .txt{
	width: 100%;
	text-align: center;
}
.tanchuang_title .x{
	width: 22px;
	height: 22px; 
	position: absolute;
	right:25px;
	top:4px;
}
.tanchuang_body{
	width: 100%;
	margin-top:30px;
}
.tanchuang_body input{ 
	margin: 0 auto;
	width: 282px;
	height: 36px;
	display:block;
	margin-bottom:40px;
	border: #e0e0e0 solid 1px;
	padding-left:10px;
}
.tanchuang_body input[type=submit]
{
width:220px ;
height:43px;
background:url(../img/button_blue2.png);
border: none;
color: #fff;
font-size: 20px;
cursor:pointer;
margin-top: -6px;
}
.tanchuang_body .tishi{
	margin-left:43px;
	margin-bottom: 6px;
	position:absolute; 
	margin-top: -26px;
	background-color:#58b850;
	width: 190px;
	height: 20px;
	line-height:20px;
	color: #fff;
	padding-left: 6px;
	font-size: 12px;
}
.tanchuang_body .tishi img{
	margin-right:6px;
	margin-top: 4px;
}