web Toast pop 弹窗 效果 悬置2s 消失

注明：本例仅作为学习！！

要实现的 效果如下图

用到的技巧

css的position 定位 fixed 属性

设置z-index 尽量大一点

设置多少秒启动消失定时

setInterval(function(){  clearPopWindows();  }, delay); 

或者这个函数也是可以的

setTimeout(function(){$('.popupWindows').empty().remove();},2000);

具体实现：

css代码：

/**添加弹出窗口*/
.popupWindows{
	background-color: #39434B;
	height: 100px;
	width: 120px;
	left: 48.9%;
	top: 48.9%;
	z-index: 9991;
	position: fixed;
	text-align:center;
	line-height:100px;
	color:white;
	border-radius: 24px;
	filter:alpha(opacity=80);  
    -moz-opacity:0.8;  
    -khtml-opacity: 0.8;  
    opacity: 0.8;  
}

js、jq代码：

/**显示指定秒后消失**/

var lb_timer; <span style="white-space:pre">	</span>
function shutUpWindow(content,delay){
	var params = "<div class='popupWindows'>" + content + "</div>";
	$('#bbb').click(function(){
	$('body').append(params);
			           
	lb_timer = setInterval(function(){  
		clearPopWindows();
	}, delay); 
	});
	}
				
	/**清除掉窗体**/
	function clearPopWindows() {

		clearInterval(lb_timer);  
		lb_timer = null;  
		//清除
		$('.popupWindows').empty().remove();
	}
				
	$(function(){
		shutUpWindow("添加成功!",2000);
	});