Jquery实现淡入淡出自动消失的提示框，Jquery+css实现加载中提示框

浏览器原生弹出框太丑，且不能自动消失，可以使用Jquery自定义一个消失提示框。

样式写法参考了bootstrap样式的编写方式。

静态效果如下：

首先在html页面body里任意位置写一个div

<div class="tips"></div><!-- 提示框 -->

 在css样式里添加样式：

.tips{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 200px;
	max-width: 700px;
	transform: translate(-50%,-50%);
	z-index: 99999;
	text-align: center;
	padding: 15px;
	border-radius: 5px;
	}
		
.tips-success {
        color: #3c763d;
        background-color: #dff0d8;
	border-color: #d6e9c6;
	}
		
.tips-info {
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
	}
		
.tips-warning {
        color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
	}
		
.tips-danger {
	color: #a94442;
        background-color: #f2dede;
	border-color: #ebccd1;
	}

然后在js代码块了直接调用如下代码就可以实现淡入淡出提示框了

$('.tips').html('操作成功').addClass('alert-success').fadeIn().delay(1500).fadeOut();

可以封装成方法，方便各种形式的提示框调用

//提供三个参数：提示信息文字，样式，停留时间。
function tips(message, style, time)
{
    style = (style === undefined) ? 'tips-success' : style;
    time = (time === undefined) ? 1200 : time;
    $('<div>')
        .appendTo('body')
        .addClass('alert ' + style)
        .html(message)
        .fadeIn()
        .delay(time)
        .fadeOut();
};

// 成功提示框
function success-tips(message, time)
{
    tips(message, 'alert-success', time);
};

// 失败提示框
function function fail-tips(message, time)
{
    tips(message, 'alert-danger', time);
};

// 提醒框
function function warning-tips(message, time)
{
    tips(message, 'alert-warning', time);
};

// 信息提示框
 function function info-tips(message, time)
{
    tips(message, 'alert-info', time);
};

提示：如果按照以上封装成了方法，则body里不需要加div提示框了。

What's more,可以利用上面tips的样式类型，写一个加载中的提示框。

同理：先在body里任意位置添加一行代码：

<div align="center" class="loading" ><img alt="" src="../image/Loading4.gif"></div>

其中，动态gif可以在千图网找，素材有很多。找一个和页面合适的就ok

然后添加样式：

.loading {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 99999;
	padding: 15px;
}

然后在js代码块里添加：

$(.loading).show();//显示
$(.loading).hide();//隐藏

ok,大功告成！