js_layer弹窗的使用和总结

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>

 

 

posted @ 2018-04-10 19:13  幽谷兰花  阅读(632)  评论(0)  编辑  收藏  举报