?
自己做了一個 彈出層，
隔一段時間自動退出的效果
——
該效果基于bootstrap控件開發(fā)
。
?
?
<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(){
//設(shè)置自動提示窗口的配置信息
var setting = {
//提示的內(nèi)容
content : "彈出提示內(nèi)容dsafdsafdsa"
};
//彈出提示信息
sqh_tips(setting);
}
//添加彈出提示信息，之后就自動消失
function sqh_tips(mysetting){
var setting = {
//提示的內(nèi)容
content : "彈出提示內(nèi)容",
//指明彈出窗口的內(nèi)容
width : "200px",
//顯示的時間
persistent : 1000,
//顯示回調(diào)函數(shù)
beforeShow : function(obj){
// alert(obj.outerHTML);
//刪除添加的節(jié)點
$(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);
//讓彈出內(nèi)容有進入 和 退出的效果
$("#"+setting.target).show().delay(setting.persistent).hide(setting.hide,function(){
setting.beforeShow(this);
});
}
//如果傳遞的參數(shù)不正確，則
if(typeof setting != "object"){
setting.content = "參數(shù)傳遞有誤";
}
//添加代碼，彈出效果
addHtml(setting);
}
</script>
?
備注：
由于時間問題，自我感覺需要優(yōu)化的方向：
1、使用new方法只產(chǎn)生一個對象，而不是每次都調(diào)用該方法
2、利用產(chǎn)生的對象，調(diào)用自身的show 和 hidden方法，不用來回的添加和刪除節(jié)點
3、應(yīng)該有三個階段 —— 初始化階段回調(diào)函數(shù) 、 顯示前階段回調(diào)函數(shù) 、 顯示后階段回調(diào)函數(shù)。?
?
?
?
?