记一个粗糙且很丑的右下角弹出提示

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); //倒计时关闭提示
    }