js_layer弹窗的使用和总结

2018-04-10

一张呈现给用户的网页，会有很多种交互，比如连不上网络，用户点击按钮时向后台请求数据不成功等等。像这些情况，用户是看不见的，

要给用户更好的体验，在特定的时间，给客户反馈内容。实时弹窗，实时弱提示反馈给用户。

在我们的项目中，使用的是layer这个插件，个人感觉给人的体验感觉还是很理想的。

技术段：

需要引入对应的layer.css和对应的layer.js

下面是封装的对应的两个弹窗功能,具体需要的api点击这里

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <!--1.引入对应的脚本-->
         <link rel="stylesheet" href="../../css/common/layer.css" />
         <script src="../../js/common/layer.js"></script>
         <title>layer弹窗</title>
     </head>
     <body></body>
     <script>
         //2.对应的代码引用和封装
         (function() {
             var layerJs = {
                 init: function() {
                     layerJs.layerLoading();
                     layerJs.layerTips('我是提示弹窗');
                 },
                 //弱提示
                 layerTips: function layerTips(tipsInfo) {
                     layer.open({
                         content: tipsInfo,
                         skin: 'msg',
                         time: 2
                     });
                 },
                 layerLoading: function() {
                     layer.open({
                         type: 2
                     });
                 }
             };
             layerJs.init();
         })()
     </script>

 </html>