请教如何添加多个不同的提示信息,如下显示的是JS第一行和第二行的文字,现在想添加7,8行文字进去,再通过下面的内链id="subsc-btn1"弹出浮窗。
网页html内靠链接:
<a id="subsc-btn1" class="rad" href="javascript:void(0);">有新消息通知我</a>
触发浮窗:
JS:
//弹出层
(function(){
var oMas = $("#mask");
function fnfadeIn(i1,i2){
i1.fadeIn();
i2.fadeIn();
}
function fnfadeOut(i1,i2){
i1.fadeOut();
i2.fadeOut();
}
//订阅
var oSub = $("#subscribe");
var oSh = $("#subscribe h3");
var oSp = $("#subscribe p");
var oSs = $("#subscribe span");
var oSb0 = $("#subsc-btn0");
var oSb1 = $("#subsc-btn1");
var oSb2 = $("#subsc-btn2");
var arr = [
"订阅楼盘详细资料",
"想了解更多楼盘资料?!马上订阅楼盘详细资料,更全面的了解楼盘,买房更安心。",
"订阅优惠活动通知",
"总是错过楼盘优惠活动?!一键订阅楼盘活动通知,优惠活动优先通知您,让您不再错过买房好时机!",
"订阅价格变动通知",
"价格变动太快?!立即订阅价格变动通知,涨价降价我们第一时间通知您,为您找好买房时机!"
]
oSb0.click(function(){
fnfadeIn(oSub,oMas);
oSp.text(arr[1]);
});
oSb1.click(function(){
fnfadeIn(oSub,oMas);
oSh.text(arr[2]);
oSp.text(arr[3]);
});
oSb2.click(function(){
fnfadeIn(oSub,oMas);
oSh.text(arr[4]);
oSp.text(arr[5]);
});
oSs.click(function(){
fnfadeOut(oSub,oMas);
});
})();
CSS:
#mask {
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:100;
background-color:#000;
filter:alpha(opacity=50);
-webkit-opacity:.5;
-moz-opacity:.5;
-ms-opacity:.5;
-o-opacity:.5;
opacity:.5
}
#activity,#subscribe,#welfare {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
z-index:101;
overflow:hidden
}
#subscribe {
padding:20px;
background:#ff6
}
#subscribe span {
display:block;
width:15px;
height:15px;
background:url(/templets/img/icon01.png) no-repeat 0 -120px;
position:absolute;
top:10px;
right:10px;
cursor:pointer
}
#subscribe h3 {
font-size:1.2em;
text-align:center
}
#subscribe p {
line-height:25px
}
#subscribe input {
width:100%;
height:30px;
padding:0 5%;
margin-top:10px;
margin-bottom:30px;
border:1px solid #ccc
}
#subscribe input:focus {
border:1px solid #e84649;
color:#e84649;
background-color:mistyrose
}
#subscribe button {
height:30px;
background-color:#e84649;
color:#fff;
border:0;
border-radius:15px;
cursor:pointer
}
#subscribe em {
display:block;
margin-top:10px;
text-align:center;
font-size:1em;
color:#e84649
}
刚才依葫芦画瓢,上面代码里新加 var oSb3 = $("#subsc-btn3"); 网页不触发浮窗
请教各位大神,JS代码应该如何写?
<li>
<a id="subsc-btn1" class="rad" href="javascript:void(0);"><em class="em1">优惠通知</em></a>
<a id="subsc-btn2" class="rad" href="javascript:void(0);"><em class="em2">变价通知</em></a>
<a id="subsc-btn3" class="rad" href="javascript:void(0);"><em class="em2">#subsc-btn3通知</em></a>
</li>
//弹出层
(function(){
var oMas = $("#mask");
function fnfadeIn(i1,i2){
i1.fadeIn();
i2.fadeIn();
}
function fnfadeOut(i1,i2){
i1.fadeOut();
i2.fadeOut();
}
//订阅
var oSub = $("#subscribe");
var oSh = $("#subscribe h3");
var oSp = $("#subscribe p");
var oSs = $("#subscribe span");
var oSb0 = $("#subsc-btn0");
var oSb1 = $("#subsc-btn1");
var oSb2 = $("#subsc-btn2");
var oSb3 = $("#subsc-btn3"); //获取id是subsc-btn3的元素
var arr = [
"订阅楼盘详细资料",
"想了解更多楼盘资料?!马上订阅楼盘详细资料,更全面的了解楼盘,买房更安心。",
"订阅优惠活动通知",
"总是错过楼盘优惠活动?!一键订阅楼盘活动通知,优惠活动优先通知您,让您不再错过买房好时机!",
"订阅价格变动通知",
"价格变动太快?!立即订阅价格变动通知,涨价降价我们第一时间通知您,为您找好买房时机!",
"#subsc-btn3通知",
"#subsc-btn3内容"
]
oSb0.click(function(){
fnfadeIn(oSub,oMas);
oSp.text(arr[1]);
});
oSb1.click(function(){
fnfadeIn(oSub,oMas);
oSh.text(arr[2]);
oSp.text(arr[3]);
});
oSb2.click(function(){
fnfadeIn(oSub,oMas);
oSh.text(arr[4]);
oSp.text(arr[5]);
});
oSb3.click(function(){ //为#subsc-btn3设置事件
fnfadeIn(oSub,oMas);
oSh.text(arr[6]);
oSp.text(arr[7]);
});
oSs.click(function(){
fnfadeOut(oSub,oMas);
});
})();
fnfadeIn 函数在哪
<a id="subsc-btn1" class="rad" href="javascript:void(0);"><em class="em1">优惠通知</em></a>
<a id="subsc-btn2" class="rad" href="javascript:void(0);"><em class="em2">变价通知</em></a>
您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632