js提示框触发和定时关闭
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./alert.js"></script>
<style>
.alert-pormpt{//自定义提示框样式
background:rgba(0,0,0,0.8);
color:#fff;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
{
display: block;
z-index: 99999;
left: 50%;
top: 100px;
position: absolute;
padding: 20px;
border-radius: 5px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
</style>
<button type="button" class="btn" onclick="test('alert-success')">成功</button>
<script>
/**
* 弹出式提示框，默认1.2秒自动消失
* @param message 提示信息
* @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
* @param time 消失时间
*/
var prompt = function (message, style, time)
{
style = (style === undefined) ? 'alert-success' : style;
time = (time === undefined) ? 2000 : time;
$('<div id="promptModal">')
.appendTo('body')
.addClass('alert '+ style)
.css({"display":"block","z-index":99999,"left":"50%","top":"50%","margin":"-25px 0 0 -50px","position": "absolute","padding": "20px","border-radius": "5px"})
.html(message)
.show()
.delay(time)
.fadeOut(10,function(){
$('#promptModal').remove();
});
};
// 成功提示
var success_prompt = function(message, time)
{
prompt(message, 'alert-success', time);
};
function test(str){
switch(str){
case "alert-success": success_prompt("更新成功");break;
}
}
</script>
