jquery实现登录失败提示_html页面提示框等待一定时间消失
html 代码可以自定义消息框样式，例如:test('alert_info2');其他消息框需引入boostrap.min.css的样式,显示提示框，等待2秒后，提示框消失<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap Example<...
·
html 代码
可以自定义消息框样式，例如:test('alert_info2');
其他消息框需引入boostrap.min.css的样式,显示提示框，等待2秒后，提示框消失
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<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;
}
</style>
</head>
<body>
<div class="container">
<h4>模拟数据查询，查询失败显示一个模态框，1.2秒后自动消失</h4>
<button type="button" class="btn" onclick="test('alert-danger')">查询失败</button>
<button type="button" class="btn" onclick="test('alert-success')">成功</button>
<button type="button" class="btn" onclick="test('alert_warning')">警告</button>
<button type="button" class="btn" onclick="test('alert_info')">信息提示</button>
<button type="button" class="btn" onclick="test('alert_info2')">信息提示2</button>
</div>
<script>
function test(str){
switch(str){
case "alert-success": success_prompt("提交成功");break;
case "alert_warning": warning_prompt("错误警告");break;
case "alert-danger": fail_prompt("提交失败");break;
case "alert_info": info_prompt("未查询到数据");break;
default:alert_prompt("未查询到数据");
}
}
</script>
</body>
</html>js代码部分
/**
* 弹出式提示框，默认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) ? 1200 : time;
$('<div id="promptModal">')
.appendTo('body')
.addClass('alert '+ style)
.css({"display":"block",
"z-index":99999,
"left":($(document.body).outerWidth(true) - 120) / 2,
"top":($(window).height() - 45) / 2,
"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);
};
// 失败提示
var fail_prompt = function(message, time)
{
prompt(message, 'alert-danger', time);
};
// 提醒
var warning_prompt = function(message, time)
{
prompt(message, 'alert-warning', time);
};
// 信息提示
var info_prompt = function(message, time)
{
prompt(message, 'alert-info', time);
};
// 信息提示
var alert_prompt = function(message, time)
{
prompt(message, 'alert-pormpt', time);
};实现效果
注意：
这种方式在与window.location.reload() 同时使用时，会造成提示框提示短暂时间就会被页面刷新，这种情况可以使用setTimeout（）方法，设置页面在一段时间后进行刷新。例如：
success_prompt("提交成功");
setTimeout("window.location.reload()",1200);
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)