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