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

之前那个太丑了没法用,重新抄了一下,并且简化了下代码

css:

		.rbclass{
			width: 260px;height: 160px;
			background-color: white;
			/*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;
			
		}
		#RDWindowsTitle{
			height: 40px;
			color: rgb(51,51,51);
			font-size: 10px;
			background-color: rgb(248,248,248);
		}
		#RDWindowsTitle .word{
			color: rgb(51,51,51);
			font-size: 10px;
			margin-left: 20px;
			float: left;
			display: inline-block;
			margin-top: -20px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.close{
			display: inline-block;
			position: absolute;
			height: 25px;
			background-color: rgb(248,248,248);
			/*background-color: rgb(94, 94, 179);*/
			width: 25px;
			border-radius: 50%;
			right: 25px;
			text-align: center;
			line-height: 25px;
			font-size: 20px;
			/*color: rgb(220,161,78);*/
			color: rgb(45,44,59);
			margin-top: 5px;
            cursor:pointer
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.RDtitle{
			margin-top: 10px;
			font-size:20px;line-height: 40px;
			text-align: center;
			color: rgb(102,102,102);
			width: 260px;
			margin-left: -25px;
		}
		.RDfont{
			font-size: 12px;line-height: 40px;
			/*color: rgb(101,88,52);*/
			border-radius: 5%;
			color:white;
			margin-left: 80px;
			margin-top: 5px;
			width: 100px;
			background-color:rgb(30,159,255) ;
			text-align: center;
            cursor:pointer
		}

html:

<div id="RDwindows" style="z-index: 9999; position: fixed;right: 5px;bottom: 5px; width: 360px">

</div>

js:

	var RDCount = 0;// 右下角计数器

// 关闭及跳转

function clickRDWindow(id){
		let parentId = null;  //父元素id
		if (id.indexOf('close') != -1){
			// 如果是关闭按钮,获取父元素id并删除此元素
			parentId = $("#"+id).parent().parent('.rbclass').attr('id');
			$("#"+parentId).remove();
		}else if(id.indexOf('jump') != -1){
			//如果是右下窗口 获取元素
				// 如果元素存在,则跳转到相应页面并删除元素
				if (id.indexOf('xxx') != -1){
					// 跳转方法
				}else if (id.indexOf('yyy') != -1){
					// 跳转方法
				}else if(id.indexOf('zzz) != -1){
					// 跳转方法
				}
				parentId = $("#"+id).parent('.rbclass').attr('id');
				$("#"+parentId).remove();
		}
	}
//计时关闭
    function closeRDWindow(id,second){
    let closeTime = Number(second)*1000; //获取关闭倒计时
        setTimeout(function (){
        $("#"+id).remove()
        },closeTime); //倒计时关闭提示
    }
// 弹出提示框

// 弹出提示框 second==0时不进行计时关闭
// id为id num为计数器
// title为提示框信息 second为倒计时时间(秒)
function onRDWindows(id,num,title,second){
    if (second == null || second == undefined|| second == '' ){
        second = 1;
    }
    let thisid = id+'Count'+num;
    let html = $("#RDwindows").html();
    html += '\t<div id="'+thisid+'"   class="rbclass" >\n' +
        '\t<div id="RDWindowsTitle">\n' +
        '\t<div class="word">信息</div>\n' +
        '\t<div id="close'+id+num+'" class="close" onclick="clickRDWindow(id)" >✕</div>\n' +
        '\t</div>\n' +
        '\t<div class="RDtitle" >'+title+'</div>\n' +
        '\t<div id="jump'+id+num+'" class="RDfont" onclick="clickRDWindow(id)">点击进行查看</div>\n' +
        '\t</div>'

    $("#RDwindows").html(html);
    if (second != 0 && second != '0'){
        closeRDWindow(thisid,second);
    }
}

使用示例:

let showtime = 1; 
RDCount = Number(RDCount)+1; // 计数器+1
let title = '您有'+i+'封新邮件'
onRDWindows('email',RDCount,title,showtime);