js_layer弹窗的使用和总结
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弹窗的使用和总结的更多相关文章
- jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗
一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...
- Android重构与设计之路，从整理提示弹窗（SmartAlertPop）开始
封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...
- JavaScript弹窗
警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...
- yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
- yii2中如何使用modal弹窗之基本使用
作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...
- 多功能弹窗控件layer
开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等 这里会推荐几个常用的js插件,丰富多样简单易移 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- ExtJs基础知识总结：自定义弹窗和ComboBox自动联想加载（四）
概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌 ...
- 谷歌chrome浏览器www.tradeadexchange.com广告弹窗跳转劫持病毒
近期大量网友出现chrome浏览器被劫持的情况,表现如下: · 点击(访问)任意网站任意链接均有概率弹出www.tradeadexchange.com. · ...
随机推荐
- linux后台运行之screen和nohup
3.1 nohup命令 如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么可以使用nohup命令. 该命令可以在你退出帐户/关闭终端之后继续运行相应的进程. nohup就是不挂起的意 ...
- Delphi实现在数据库中存取图像
向窗体上添加一个TListBox组件.一个TImage组件和一个TTable组件,设计完成的主界面如图1所示. 图1 主界面 本系统中需要设计一个新的基于Paradox 7的数据库Image.db,图 ...
- （转）Ubuntu 12.04 LTS安装VMware Tools实现linux和window 互相复制：无法找到kernel header path的问题
Ubuntu 12.04 LTS安装VMware Tools无法找到kernel header path的问题 ubuntuvmware Ubuntu 12.04 安装 VMware Tools, ...
- [CF1095F]Make It Connected
题目大意:给你$n(n\leqslant2\times10^5)$个点和$m(m\leqslant2\times10^5)$条边,第$i$个点点权为$a_i$.连接$u,v$两个点的代价为$a_u+a ...
- [洛谷P3346][ZJOI2015]诸神眷顾的幻想乡
题目大意:给你一棵$n$个点的树,最多有$20$个叶子节点,问共有几个不同的子串 题解:广义$SAM$,对每个叶子节点深搜一次,每个节点的$lst$设为这个节点当时的父亲,这样就可以时建出来的$SAM ...
- HDU - 6333 Harvest of Apples
题意: T次询问,每次给出n,m.求sigma(k:0->m)C(n, k). 题解: 用离线莫队来做. 令S(n,m) = sigma(k:0->m)C(n, k). S(n+1, m) ...
- POJ1228：Grandpa's Estate——题解
http://poj.org/problem?id=1228 题目大意:给一个凸包,问是否为稳定凸包. ———————————————————————— 稳定凸包的概念为:我任意添加一个点都不能使这个 ...
- 解决jsp两种提交方式乱码 的方法
解决中文乱码 ---post提交方式 需要在处理页面添加request.setCharacterEncoding("utf-8"); 制定请求的编码,调用一下request.ge ...
- IE9的大css文件截断问题
最近做项目调试IE9的兼容性,遇到问题,样式应用不上去,在其他浏览器中是正常的. 经过查找,判定是IE9的css截断问题. 1. IE9截断判定方法 1. 打开IE Developer Tools,在 ...
- bzoj1901: Zju2112 Dynamic Rankings(BIT套主席树)
带修改的题主席树不记录前缀,只记录单点,用BIT统计前缀. 对于BIT上每一个点建一棵主席树,修改和询问的时候用BIT跑,在主席树上做就行了. 3k4人AC的题#256...应该不算慢 #incl ...