提示框、消息框等待2秒中自动消失

最新推荐文章于 2024-03-26 09:18:11 发布

yb305小白

最新推荐文章于 2024-03-26 09:18:11 发布

阅读量9.5k

点赞数 11

分类专栏：插件 JavaWeb学习文章标签： bootstrap

本文链接：https://blog.csdn.net/yb305/article/details/106277673

版权

JavaWeb学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

插件

3 篇文章 0 订阅

订阅专栏

一、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);
};

三、实现效果