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. java得到当前时间

    SimpleDateFormat timeformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); java.util.Date ...

  2. do_group_exit函数

    一个进程在sleep状态如何获取进程的调用栈 TASK_WAKEUPKILL状态 一个进程sleep了,我如何获取他的用户态栈,如何获取用户堆栈 如何在内核态打印用户态+内核态的栈? 确定上一个调用栈 ...

  3. [剑指Offer] 59.按之字形顺序打印二叉树

    题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. [思路]先按层次遍历存入,通过设立标志位,将 ...

  4. Codeforces633H-Fibonacci-ish II

    题目 斐波那契数列\(f\),\(f\_1=f\_2=1,\ f\_n=f\_{n-1}+f\_{n-2}\ (n>2)\). 给定长度为\(n\ (n\le 30000)\)的数列\(a\), ...

  5. BZOJ1086：[SCOI2005]王室联邦——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1086 题面源于洛谷. 题目描述 “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每 ...

  6. UVA.10066 The Twin Towers (DP LCS)

    UVA.10066 The Twin Towers (DP LCS) 题意分析 有2座塔,分别由不同长度的石块组成.现在要求移走一些石块,使得这2座塔的高度相同,求高度最大是多少. 问题的实质可以转化 ...

  7. HDOJ(HDU).1258 Sum It Up (DFS)

    HDOJ(HDU).1258 Sum It Up (DFS) [从零开始DFS(6)] 点我挑战题目 从零开始DFS HDOJ.1342 Lotto [从零开始DFS(0)] - DFS思想与框架/双 ...

  8. 项目管理---git----快速使用git笔记(六)------本地开发与远程仓库的交互----常用git命令

    无论是我们自己把本地的项目新建了一个远程仓库 还是 从远程仓库获取到了 本地,现在我们都在本地有了一份项目代码,服务器上对应有项目代码的信息. 现在我们就开始进行交互操作了. 也就是说明一些在 正常开 ...

  9. 搞笑的代码 ( funny )

    搞笑的代码 ( funny ) 在OI界存在着一位传奇选手——QQ,他总是以风格迥异的搞笑代码受世人围观 某次某道题目的输入是一个排列,他使用了以下伪代码来生成数据 while 序列长度<n d ...

  10. 谈谈CSS中em与px的差异

    在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...