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>

js_layer弹窗的使用和总结的更多相关文章

  1. jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗

    一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...

  2. Android重构与设计之路，从整理提示弹窗（SmartAlertPop）开始

    封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...

  3. JavaScript弹窗

    警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...

  4. yii2 modal弹窗之ActiveForm ajax表单异步验证

    作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...

  5. yii2中如何使用modal弹窗之基本使用

    作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  6. 多功能弹窗控件layer

    开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等 这里会推荐几个常用的js插件,丰富多样简单易移 ...

  7. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  8. ExtJs基础知识总结：自定义弹窗和ComboBox自动联想加载（四）

    概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌 ...

  9. 谷歌chrome浏览器www.tradeadexchange.com广告弹窗跳转劫持病毒

    近期大量网友出现chrome浏览器被劫持的情况,表现如下:           ·  点击(访问)任意网站任意链接均有概率弹出www.tradeadexchange.com.           ·  ...

随机推荐

  1. 软工网络15团队作业4——Alpha阶段敏捷冲刺-4

    一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 完成程序副界面的设计与信息的输入统计 明天计划完成的工作: 日期等细致信息的处理 工作中遇到的困难: 对微信小程序开发的代码构成有了一些了解 ...

  2. C语言的世界

    大家好,我是一名大一的学生,我叫陈由钧,我来自计算机系,一开始选择这门专业的时候,是出于对计算机的热爱,我喜欢计算机,喜欢没事琢磨琢磨计算的各种程序,各种软件,所以我选择学习计算机这门专业,第一周我就 ...

  3. android eclipse 添加libs文件夹

    导入一个项目发现没有libs文件夹,后来z自己新建了个lib文件夹,但是总是不行,后来发现错了,应该是libs文件夹.建完了之后,系统会自动在build path中把这个文件夹添加进来的:个人无须操作

  4. BZOJ 1821 部落划分(二分+并查集)

    答案是具有单调性的. 因为最近的两个部落的距离为mid,所以要是有两个野人的距离<mid,则他们一定是一个部落的. 用并查集维护各联通块,如果最后的联通块个数>=k,那么mid还可以再小点 ...

  5. BZOJ 1509 逃学的小孩(树的直径)

    题意:从树上任找三点u,v,w.使得dis(u,v)+min(dis(u,w),dis(v,w))最大. 有一个结论u,v必是树上直径的两端点. 剩下的枚举w就行了. 具体不会证... # inclu ...

  6. Linux特殊字符含义

    文件名以 ' . ' 开头的都是隐藏文件或目录,只需要在文件或目录名前添加 ' . ' 就可以隐藏它 ~               表示主目录 .                当前目录 . .  ...

  7. Qt基本控件及三大布局

    Qt基本控件及三大布局 来源: http://blog.csdn.net/a2604539133/article/details/73920696 Qt基本模块 一.Qt的三大布局 QHBoxLayo ...

  8. [Violet]天使玩偶

    description Ayu 在七年前曾经收到过一个天使玩偶,当时她把它当作时间囊埋在了地下.而七年后 的今天,Ayu 却忘了她把天使玩偶埋在了哪里,所以她决定仅凭一点模糊的记忆来寻找它. 我们把 ...

  9. BZOJ4815 [CQOI2017]小Q的表格 【数论 + 分块】

    题目链接 BZOJ4815 题解 根据题中的式子,手玩一下发现和\(gcd\)很像 化一下式子: \[ \begin{aligned} bf(a,a + b) &= (a + b)f(a,b) ...

  10. selenium - webdriver - ActionChains类(鼠标操作)

    ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_click() ...