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>

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. HDU 2133 What day is it

    http://acm.hdu.edu.cn/showproblem.php?pid=2133 Problem Description Today is Saturday, 17th Nov,2007. ...

  2. PHPCMS登录后不是进入会员中心而是转入登录前页最新代码

    phpcms比如会员在登录前是停留在下载页面的,但是下载页面是要求会员登录后才能下载,所以会员就有这个登陆过程,但是一般的会员系统是登录进会员中心的,就会有点体验不好  这里教大家修改下 能达到登录后 ...

  3. H3C SNMP配置解析

    华为交换机snmp配置 snmp-agent                                           /使能snmp服务/snmp-agent local-engineid ...

  4. Java经典设计模式 总览

    一.概况 总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥 ...

  5. 在Ubuntu系统下编译arcsim仿真器

    首先,用tar zxvf arcsim-0.2.1.tar.gz 将软件包解压 然后,打开里面的INSTALL文件,按照里面的步骤一步一步安装库.Ubuntu13.04下 1.BLAS sudo ap ...

  6. hdu 1068 Girls and Boys (二分匹配)

    Girls and Boys Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. SOA,ESB,WebService的关系

    1. 什么是SOA SOA(Service-Oriented Architecture)既服务导向架构,是指为了解决在inernet环境下业务集成的需要,通过连接能完成特定任务的独立功能实现的一种软件 ...

  8. NOIP 2018 -The Wound-

    "一招不慎,满盘皆输" 如果这个盘是整整一年的OI生涯的话 那么"一招"一定就是NOIP了 Update 2019/4/6 剧变的一年 noip这个成绩意味着我 ...

  9. poj3207 Ikki's Story IV - Panda's Trick 2-sat问题

    ---题面--- 题意:给定一个圈,m条边(给定),边可以通过外面连,也可以通过里面连,问连完这m条边后,是否可以做到边两两不相交 题解: 将连里面和连外面分别当做一种决策(即每条边都是决策点), 如 ...

  10. BZOJ1043：[HAOI2008]下落的圆盘——题解（配图片）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1043 Description 有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周 ...