Hi,大家好,首先给大家介绍我女神,你们肯定认识,哈哈,言归正传,开始说说我今天的博文;
在我们平时的开发中,需要将错误信息展示给用户,下面分享一种实现方式
1.实现思路
首先,定义一对嵌套的div标签,并且在内部div标签中定义一个span标签.错误信息我们会放到span标签中展示;
我们在css中设置 display: none让div隐藏,如果有错误信息返回,我们调用方法让它展示出来,用setTimeout()来控制多久以后再隐藏它;
大家在使用的时候将js文件和css文件抽取出来,放到指定位置,然后引入到html或者jsp就可以;
这里为了方便演示,我给button绑定了事件来实现,在项目中我们一般发起ajax请求,在返回的result中获取到msg,进而调用封装好的toast()方法来展示错误信息就可以;
2.代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
//弹出错误信息
function toast(msg) {
$('.toastItem').show().find('span').text(msg);
setTimeout(function () {
$('.toastItem').hide()
}, 1500)
}
$(function () {
$("button").click(function () {
var msg = "我是错误信息";
toast(msg);
});
});
</script>
<style type="text/css">
.toastItem {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
z-index: 9999;
}
.toastItem .toastTip {
width: 100%;
position: fixed;
bottom: 5%;
left: 0;
text-align: center;
}
.toastItem .toastTip span {
padding: 8px 20px;
border-radius: 30px;
color: #fff;
background: #393939;
}
</style>
</head>
<body>
<p id="p1">页面错误信息提示</p>
<button>顶顶</button>
<div class="toastItem">
<div class="toastTip"><span></span></div>
</div>
</body>
</html>
3.效果图
由于本人水平所限,博文中难免还存在一些缺点和错误,希望大家批评指正.
欢迎大家加入我们的技术交流群:210012086
Milogenius:83656093