自己做了一个 弹出层， 隔一段时间自动退出的效果 —— 该效果基于bootstrap控件开发 。
<body>
<div id="huangbiao" onclick="abc()">sdadsafdsaf</div>
</body>
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/sqh_style_v2.0.css">
<script>
function abc(){
//设置自动提示窗口的配置信息
var setting = {
//提示的内容
content : "弹出提示内容dsafdsafdsa"
};
//弹出提示信息
sqh_tips(setting);
}
//添加弹出提示信息，之后就自动消失
function sqh_tips(mysetting){
var setting = {
//提示的内容
content : "弹出提示内容",
//指明弹出窗口的内容
width : "200px",
//显示的时间
persistent : 1000,
//显示回调函数
beforeShow : function(obj){
// alert(obj.outerHTML);
//删除添加的节点
$(obj).remove();
},
//退出的时间
hide:300
};
//获取用户的配置文件
setting = $.extend(setting,mysetting);
function addHtml(setting){
var contentHtml ='<div id="'+setting.target+'">'+
'<div style="position: fixed;top:30%;width: 100%;z-index:1050;" id="__dialog_div">'+
'<div style="position: relative;width: '+setting.width+';margin:0px auto;" onclick="remove()">'+
'<div class="alert alert-info">'+
setting.content+
'</div>'+
'</div>'+
'</div>'+
'<div class="modal-backdrop fade in" id="__zhezhao"></div>'+
'</div>';
//将遮罩效果代码添加到body标签中
$("body").append(contentHtml);
//让弹出内容有进入 和 退出的效果
$("#"+setting.target).show().delay(setting.persistent).hide(setting.hide,function(){
setting.beforeShow(this);
});
}
//如果传递的参数不正确，则
if(typeof setting != "object"){
setting.content = "参数传递有误";
}
//添加代码，弹出效果
addHtml(setting);
}
</script>
备注：
由于时间问题，自我感觉需要优化的方向：
1、使用new方法只产生一个对象，而不是每次都调用该方法
2、利用产生的对象，调用自身的show 和 hidden方法，不用来回的添加和删除节点
3、应该有三个阶段 —— 初始化阶段回调函数 、 显示前阶段回调函数 、 显示后阶段回调函数。
