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. · ...
随机推荐
- 关于&$地址传递的练习
php默认为传值传递: 既: $a=10;$b=$a; //$b为10$a=+10; //$a 为20 echo $a.'和'.$b; # $a is 20 and $b is 10! 要是想变为地 ...
- /var/redis/run/redis_6379.pid exists, process is already running or crashed的解决办法
命令:service redis start /var/redis/run/redis_6379.pid exists, process is already running or crashed 引 ...
- Django 2.0 学习(06)：Django 视图(进阶)
概述 Django中的特方法,该方法代表了Django的Web页面,并且视图具有特定的模板.以博客应用为例进行说明,在博客应用中应该包含下面的视图: 博客主页:显示最近的一些记录: 详细页面:单个详细 ...
- Codeforces 1025D（区间dp）
容易想到设f[i][j][k]为i~j区间以k为根是否能构成bst.这样是O(n4)的.考虑将状态改为f[i][j][0/1]表示i~j区间以i-1/j+1为根能否构成bst.显然如果是i-1作为根的 ...
- （转）把hadoop源码关联到eclipse工程
把hadoop源码关联到eclipse工程 转:http://www.superwu.cn/2013/08/04/355 在eclipse中阅读源码非常方便,利于我们平时的学习,下面讲述如何把 ...
- 虚拟机如何进入BIOS
- 【刷题】洛谷 P2709 小B的询问
题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...
- LOJ6388：[THUPC2018]赛艇——题解
https://loj.ac/problem/6388 如果你做过BZOJ5217:[Lydsy2017省队十连测]航海舰队的话,那么恭喜你,这道题就是大水题. 如果你做过BZOJ4259:残缺的字符 ...
- django项目初探
一:创建django项目 设置数据库(默认sqlit3) mysql: setting:中设置 DATABASES = { 'default': { 'ENGINE': 'django.db.back ...
- JavaScript时间戳与其格式化
在 PHP + MySQL (日期类型为datetime) + ajax 应用中,有时候需要用 JavaScript 将时间戳类型格式化为一般的时间类型格式.下面提供一些转换的方法,比较常见的一些总结 ...