css
.rbclass{
width: 360px;height: 100px;
/*background-color: rgb(255,221,133);*/
background-color: rgb(94, 94, 179);
float: right;
font-size: 20px;
line-height: 80px;
text-align: center;
margin: 10px;
box-shadow: 10px 10px 15px #865252;
}
.close{
position: absolute;
height: 25px;
/*background-color: rgb(245,206,105);*/
background-color: rgb(94, 94, 179);
width: 25px;
border-radius: 50%;
right: 0px;
text-align: center;
line-height: 25px;
font-size: 25px;
/*color: rgb(220,161,78);*/
color: white;
margin-top: -6px;
}
.RDtitle{
margin-top: 10px;
font-size:20px;line-height: 40px;
text-align: left;
margin-left: 100px;
color: white;
}
.RDfont{
font-size: 12px;line-height: 40px;
/*color: rgb(101,88,52);*/
color:white;
text-align: left;
margin-left: 100px;
}
html:
<div id="RDwindows" style="z-index: 9999; position: fixed;right: 5px;bottom: 5px; width: 360px">
</div>
js:
关闭用代码:
function clickRDWindow(id){
let st = null; //是否存在此元素
let close = id.slice(0,5) //是否是关闭按钮
if (close == 'close'){
// 如果是关闭按钮,获取父元素id并删除此元素
st = $("#"+id).parent('.rbclass').attr('id');
$("#"+st).remove();
}else{
//如果是右下窗口 获取元素
st = $("#"+id).text();
if (st != null && st != undefined && st != ''){
// 如果元素存在,则跳转到相应页面并删除元素
if (id.indexOf('xxx') != -1){
// 这里跳转到相应页面方法
}else if (id.indexOf('yyy') != -1){
// 这里跳转到相应页面方法
}else if(id.indexOf('zzz') != -1){
// 这里跳转到相应页面方法
}
$("#"+id).remove();
}
}
}
新增代码:
var RDCount = 0;// 右下角计数器
// 在发送请求外
var this_ = this;
// 以下为返回内容中添加弹出提示
try {
if(data.success==1){
let flag = true; // 是否显示右下角弹窗
let showtime = 1 // 弹窗显示时间 (秒)
if (data.entity.showTime != null && data.entity.showTime != undefined && data.entity.showTime >0){
showtime = data.entity.showTime;
}
if(this_.noticeCount.xxxCount < data.entity.xxxCount
&& data.entity.xxxCount != 0 && flag){
let i = data.entity.xxxCount - this_.noticeCount.xxxCount;
let html = $("#RDwindows").html();
RDCount = Number(RDCount)+1; // 计数器+1
html +='\t<div id="xxxCount'+RDCount+'" onclick="clickRDWindow(id)" class="rbclass" >\n' +
'\t\t<div id="closexxx" class="close" onclick="clickRDWindow(id)" >✖</div>\n' +
'\t\t<div class="RDtitle" >您有'+i+'封新xxx</div>\n' +
'\t\t<div class="RDfont" >点击进行查看</div>\n' +
'\t</div>'
$("#RDwindows").html(html);
// 定时关闭
closeRDWindow("xxxCount"+RDCount,showtime);
}
if(this_.noticeCount.yyyCount < data.entity.yyyCount
&& data.entity.yyyCount != 0 && flag){
let i = data.entity.yyyCount - this_.noticeCount.yyyCount;
let html = $("#RDwindows").html();
RDCount = Number(RDCount)+1; // 计数器+1
html +='\t<div id="yyyCount'+RDCount+'" onclick="clickRDWindow(id)" class="rbclass" >\n' +
'\t\t<div id="closeyyy" class="close" onclick="clickRDWindow(id)" >✖</div>\n' +
'\t\t<div class="RDtitle" >您有'+i+'个新yyy</div>\n' +
'\t\t<div class="RDfont" >点击进行查看</div>\n' +
'\t</div>'
$("#RDwindows").html(html);
// 定时关闭
closeRDWindow("yyyCount"+RDCount,showtime);
}
if(this_.noticeCount.zzzCount < data.entity.zzzCount
&& data.entity.zzzCount != 0 && flag){
let i = data.entity.zzzCount - this_.noticeCount.zzzCount;
let html = $("#RDwindows").html();
RDCount = Number(RDCount)+1; // 计数器+1
html += '<div id="zzzCount'+RDCount+'" onclick="clickRDWindow(id)" class="rbclass" >\n' +
'\t\t<div id="closezzz" class="close" onclick="clickRDWindow(id)" >✖</div>\n' +
'\t\t<div class="RDtitle" >您有'+i+'条新zzz</div>\n' +
'\t\t<div class="RDfont" >点击进行查看</div>\n' +
'\t</div>'
$("#RDwindows").html(html);
closeRDWindow("zzzCount"+RDCount,showtime);
}
}
} catch (e) {
// 这里返回错误代码
}
计时关闭
function closeRDWindow(id,second){
let closeTime = Number(second)*1000; //获取关闭倒计时
setTimeout(function (){
$("#"+id).remove()
},closeTime); //倒计时关闭提示
}