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);
	});



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值