layer弹框层学习笔记
这里对layer的笔记只是大概记录一下其使用过程，以便后续使用时快速回顾，更详细使用及介绍参考官网实例。链接在本文末
一 、初步了解layer-弹层之美
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被8267108人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
几个效果展示：
| 简单内容展示 | TAB层 |
 |
 |
二 、基本使用流程
1.引入jQuery1.8以上的任意版本
2.引入layer.js，将下载的layer包整个导入项目中
3.编写弹出层方法
4.调用弹框
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LayerTest.aspx.cs" Inherits="WebLayer.Scripts.LayerTest" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%-- 1.引入jQuery1.8以上的任意版本 --%>
<script src="jquery-3.3.1.min.js"></script>
<%-- 2.引入layer.js --%>
<script src="../layer-v3.1.1/layer/layer.js"></script>
<%-- 3.编写弹出层方法 --%>
<script type="text/javascript">
function Content() {
layer.alert('内容');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%-- 4.调用弹框 --%>
<a onclick="Content()">Add</a>
</div>
</form>
</body>
</html>
三 、一些弹框举例
//初体验
layer.alert('内容')
//第三方扩展皮肤
layer.alert('内容', {
icon: 1,
skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
})
//询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
//提示层
layer.msg('玩命提示中');
//墨绿深蓝风
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
}, function(){
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
});
});
//捕获页
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
}
});
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
});
//自定页
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: '内容'
});
//tips层
layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
//iframe层
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'mobile/' //iframe的url
});
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//fly.layui.com/'
});
}
});
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
//loading层
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
tips: [1, '#3595CC'],
time: 4000
});
//prompt层
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
//tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
//相册层
$.getJSON('test/photos.json?v='+new Date, function(json){
layer.photos({
photos: json //格式见API文档手册页
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
});
Layer弹框属性介绍官网链接：https://www.layui.com/doc/modules/layer.html
Layer弹框JS包下载及弹框在线演示：http://layer.layui.com/
layer弹框层学习笔记的更多相关文章
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- 常用的layer弹出层
本文来自 松耦合 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/dunegao/article/details/78978448?utm_source=copy 常用 ...
- layer弹框在实际项目中的一些应用
官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...
- layer弹出层不居中解决方案
layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>
- layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- layer弹出层
最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...
- 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- Layer弹出层销毁问题
Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...
- layer 弹出层 回调函数调用 弹出层页面 函数
1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...
随机推荐
- mac安装MySQLdb(mysql-python模块)
折腾了有一会,网上资料很多,但是在实际安装时就会发现有很多坑,如下实战操作可行.供参考. Command "python setup.py egg_info" failed wit ...
- linux centos ftp服务器搭建
原文参考 步骤一:构建vsftpd服务器 1)使用yum安装vsftpd软件包yum -y install vsftpdrpm -q vsftpd #确认安装成功,显示vsftpd对应版本 vsftp ...
- webpack安装，常见问题和基本插件使用
一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...
- Spring自动注入Bean
通过@Autowired或@Resource来实现在Bean中自动注入的功能,但还要在配置文件中写Bean定义,下面我们将介绍如何注解Bean,从而从XML配置文件 中完全移除Bean定义的配置. 1 ...
- 更改ejs模板引擎的后缀为html
安装 EJS 在项目目录右键->Open Command Prompt Here 输入 npm install ejs 打开app.js //app.set('view engine', 'ja ...
- BER
BER全称Bit Error Ratio,比特出错概率,是衡量通信系统性能的最根本指标. 采用纠错编码,只要纠前BER小于某个门限值(BER容限点),纠错编码后就能实现纠后误码率为零的传输. 一般情况 ...
- PHP mysqli_error_list() 函数
返回最近调用函数的最后一个错误代码: <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect("localhos ...
- 解决InputStream中数据读取不完整问题
转载:https://blog.csdn.net/lilidejing/article/details/37913627 当需要用到InputStream获取数据时,这时就需要读取InputStrea ...
- STS工具:mybayis连接oracle数据库
1.pom.xml文件中的依赖 刚添加依赖的时候会报错,原因是jar包下不下来. 2.我的jdk是1.6,所以需要升级jdk版本到1.8 执行mvn -v命令,可以看到maven的版本号 DOS窗口执 ...
- fckeditor实现ctrl+v粘贴word图片并上传
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...