2018-04-10
一张呈现给用户的网页,会有很多种交互,比如连不上网络,用户点击按钮时向后台请求数据不成功等等。像这些情况,用户是看不见的,
要给用户更好的体验,在特定的时间,给客户反馈内容。实时弹窗,实时弱提示反馈给用户。
在我们的项目中,使用的是layer这个插件,个人感觉给人的体验感觉还是很理想的。
技术段:
需要引入对应的layer.css和对应的layer.js
下面是封装的对应的两个弹窗功能,具体需要的api点击这里
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <!--1.引入对应的脚本--> 6 <link rel="stylesheet" href="../../css/common/layer.css" /> 7 <script src="../../js/common/layer.js"></script> 8 <title>layer弹窗</title> 9 </head> 10 <body></body> 11 <script> 12 //2.对应的代码引用和封装 13 (function() { 14 var layerJs = { 15 init: function() { 16 layerJs.layerLoading(); 17 layerJs.layerTips('我是提示弹窗'); 18 }, 19 //弱提示 20 layerTips: function layerTips(tipsInfo) { 21 layer.open({ 22 content: tipsInfo, 23 skin: 'msg', 24 time: 2 25 }); 26 }, 27 layerLoading: function() { 28 layer.open({ 29 type: 2 30 }); 31 } 32 }; 33 layerJs.init(); 34 })() 35 </script> 36 37 </html>