有个按钮，点开是弹层，比如后台传给我两个不同的值，让我弹出两个不同的弹层。我前端怎么实现一个按钮在不同情况下弹出不同的弹层,js里面index等于2和3 是我准备写的，不知道写什么
<!DOCTYPE html>
<html>
<head>
<title>优惠券</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"></head>
<style type="text/css">
html,body{
position: relative;
margin:0;
padding:0;
width: 100%;}
.cpn{
width: 81.25%;
height: 50px;
margin:0 auto;
margin-top: 7.5%;
border-bottom: 2px solid #999999;
padding:10px 20px 10px 0;}
.ttn
{
width: 81.25%;
height: 50px;
margin:0 auto;
border-bottom: 2px solid #999999;
padding:10px 20px 10px 0;}
input[type=text]{
display: inline;
height:40px;
color: #999999;
font-size:18px;
font-family: Helvetica,"Hiragino Sans GB";
border: none;
margin-top:10px;
overflow: hidden;}
.ttimg{
background:url(img/1.png);
background-size: 100% 100%;
width: 29.487%;
height:100%;
position:relative;
margin-top:-50px;
margin-left:70.513%;}
.btn{
height:50px;
width:80.4123%;
text-align: center;
margin:0 auto;
margin-top: 40px;
font-size:18px;
line-height: 50px;
background-color: #ffe600;
border-radius:30px;
border:1px solid;}
a{
text-decoration: none;}
a:link{color:#000;}
a:visited{color:#000;}
a:hover{color:#000;}
a:active{color:#000;}
.pop {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
top: 0;
left: 0;}
a.open {
display:block;}
.hide {
display: none}
.contentbox {
width: 81.25%;
height: 30%;
position: absolute;
left: 0;
top: -10%;
right: 0;
bottom: 0;
margin: auto;
border-radius: 15px;
background-color:#f5f5f5;
background-size: 100% 100%;
background-repeat: no-repeat;}
.close {
position: absolute;
cursor: pointer;
/*transform:translateY(290%);
-webkit-transform:translateY(290%);
-ms-transform:translateY(290%);
-o-transform:translateY(290%);
-moz-transform:translateY(290%);*/
width: 100%;
height: 25%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top:1px solid #cacaca;
text-align: center;
line-height: 3em;
top:75%;}
.thecoupon{
width:100%;
height:75%;
background-size: 100% 100%;}
.cp-m{
width:83.11%;
height: 33.333%;
size: 100% 100%;
margin-top: 12.5%;
margin-left: 8.445%;
background-color: #fee600;
text-align: center;
font-size: 18px;
line-height: 3em;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border:1px solid;
border-bottom: none;}
p{
margin-top: 7%;
text-align: center;}
</style>
<body>
<div class="cpn">
<input type="text" name="num" value="优惠券号">
</div>
<div class="ttn">
<input type="text" name="num" value="验证码">
<div class="ttimg"></div>
</div>
<a href="javascript:;" class="open"><div class="btn">领取优惠券</div></a>
<div class="pop hide" id="chenggong">
<div class="contentbox">
<div class="thecoupon">
<div class=cp-m>10元 优惠券</div>
<p>恭喜！领取优惠券成功！</p>
</div>
<div class="close close1">确定</div>
</div></div>
<script type="text/javascript">
var pop=document.querySelector('.pop'),
btn1=document.querySelector('.open'),
close1=document.querySelector('.close1');
btn1.addEventListener('click',function(e){_open(1)},false);
btn1.addEventListener('click',function(e){_open(2)},false);
btn1.addEventListener('click',function(e){_open(3)},false);
close1.addEventListener('click',function(e){_close(1)},false);
close1.addEventListener('click',function(e){_close(2)},false);
close1.addEventListener('click',function(e){_close(3)},false);
function _open(index,e){
if(index ==1){
document.getElementById('chenggong').setAttribute('class','pop');
}else if(index ==2){
document.getElementById('chenggong').setAttribute('class','pop');
}else if(index ==3){
document.getElementById('chenggong').setAttribute('class','pop');
}
}
function _close(index,e){
if(index ==1){
document.getElementById('chenggong').setAttribute('class','pop hide');
}else if(index ==2){
document.getElementById('chenggong').setAttribute('class','pop hide');
}else if(index ==3){
document.getElementById('chenggong').setAttribute('class','pop hide');
}
}
</script></body>
</html>
1：用户前端点击将事件发给后端，
2：后端判断优惠券有，还是没有，或优惠券有效还是过期。
3：后端返回判断，前端接收
4：前端触发
所以前端只有一个值。
你把值传过去之后，后台给你两个值得话，回调函数里做个判断，比如分1和2.n个都可以
if(text1 ==1){
..}else{ }
弹出样式都一样 写个方法 只需加入文本即可。