注明:本例仅作为学习!!
要实现的 效果如下图
用到的技巧
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);
});