js_layer弹窗的使用和总结

最新推荐文章于 2024-09-26 07:41:32 发布

weixin_30879169

最新推荐文章于 2024-09-26 07:41:32 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wush-1215/p/8781690.html

本文介绍如何利用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>