浏览器原生弹出框太丑,且不能自动消失,可以使用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,大功告成!