关于Layer弹出框初探
layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达20w+，大概有15万Web平台正在使用layer。
<html>
<head>
<title>弹窗效果</title>
</head>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="layer/layer.js"></script>
<style>
.buttonValue{width:100%;display:inline-block;padding-top:20px;padding-bottom:20px;border-bottom:2px solid #666;}
.buttonValue li{float:left;min-width:100px;height:50px;margin-left:20px;padding:0 10px;line-height:50px;font-size:16px;text-align:center;border-radius:10px;background-color:#666;color:#fff;cursor:pointer;}
.buttonValue li:hover{background-color:#f54372;} //自定义样式一
body .demo-class1 .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class1 .layui-layer-btn{border-top:1px solid #E9E7E7;padding:10px;}
body .demo-class1 .layui-layer-btn a{background:#333;}
body .demo-class1 .layui-layer-btn .layui-layer-btn1{background:#999;} //自定义样式二
body .demo-class2 .layui-layer-title{background:#c00; color:#0f0; border: none;}
body .demo-class2 .layui-layer-btn{border-top:1px solid #E9E7E7;padding:10px;}
body .demo-class2 .layui-layer-btn a{background:#333;}
body .demo-class2 .layui-layer-btn .layui-layer-btn1{background:#666;}
//加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域
</style>
<body>
<ul class="buttonValue type">
<li rel="1">弹出框</li>
<li rel="2">弹出框(信息层)</li>
<li rel="3">弹出框(页面层)</li>
<li rel="4">弹出框(iframe层)</li>
<li rel="5">弹出框(加载层)</li>
<li rel="6" id="id">弹出框(tips层)</li>
</ul> <ul class="buttonValue skin">
<li rel="1">样式（自定义全局）</li>
<li rel="2">样式（自定义单个）</li>
<li rel="3">样式（layui-layer-lan）</li>
<li rel="4">样式（layui-layer-molv）</li>
</ul> <ul class="buttonValue area">
<li rel="1">宽高（默认）</li>
<li rel="2">宽高（自定义）</li>
</ul> <ul class="buttonValue offset">
<li rel="1">坐标（左上）</li>
<li rel="2">坐标（右上）</li>
<li rel="3">坐标（左下）</li>
<li rel="4">坐标（右下）</li>
<li rel="5">坐标（居中）</li>
<li rel="6">坐标（任意位置）</li>
</ul> <ul class="buttonValue iconMse">
<li rel="0">消息图标（提示信息）</li>
<li rel="1">消息图标（成功信息-对勾）</li>
<li rel="2">消息图标（错误信息-叉）</li>
<li rel="3">消息图标（确认信息）</li>
<li rel="4">消息图标（锁定信息）</li>
<li rel="5">消息图标（失败信息-笑脸）</li>
<li rel="6">消息图标（成功信息-沮丧）</li>
</ul> <ul class="buttonValue iconLoad">
<li rel="1">加载图标（0）</li>
<li rel="2">加载图标（1）</li>
<li rel="3">加载图标（2）</li>
</ul> <ul class="buttonValue closeBtn">
<li rel="0">关闭按钮（0）</li>
<li rel="1">关闭按钮（1）</li>
<li rel="2">关闭按钮（2）</li>
</ul> <ul class="buttonValue shade">
<li rel="1">遮罩层（默认）</li>
<li rel="2">遮罩层（0）</li>
<li rel="3">遮罩层（0.5）</li>
<li rel="4">遮罩层（0.5，#393D49)</li>
</ul> <ul class="buttonValue shadeClose">
<li rel="false">遮罩层关闭（默认）</li>
<li rel="true" value="遮罩层必须存在">遮罩层关闭（点击空白关闭）</li>
</ul> <ul class="buttonValue anim">
<li rel="0">动画（0）</li>
<li rel="1">动画（1）</li>
<li rel="2">动画（2）</li>
<li rel="3">动画（3）</li>
<li rel="4">动画（4）</li>
<li rel="5">动画（5）</li>
<li rel="6">动画（6）</li>
</ul> <script>
$(".type li").click(function(){
var rel = $(this).attr("rel");
switch(rel){
case "1" :
layer.open({
type:0,
title: ['hello Layer', 'font-size:14px;'],
content: '传入任意的文本或html',//这里content是一个普通的String
skin: 'layui-layer-lan',//目前layer内置的skin有：layui-layer-lan、layui-layer-molv
area: ['500px', '300px'],//遮罩层区域大小
shade: 0.5,//遮罩层透明度
shadeClose: true,//是否点击遮罩关闭
time: 5000,//自动关闭时间
maxmin: true,//最大最小化
id: 'popup',//设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
});
break; case "2" :
layer.open({
type:0,
title: '信息层',
content: 'type = 0',
});
break;
case "3" :
layer.open({
type:1,
title: '页面层',
content: 'type = 1',
});
break;
case "4" :
layer.open({
type:2,
title: 'iframe层',
content: 'http://www.baidu.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://www.baidu.com', 'no'],
});
break;
case "5" :
layer.open({
type:3,
title: '加载层',
content: 'type = 3',
});
break;
case "6" :
layer.open({
type:4,
title: 'tips层',
content: ['tips层', '#id'] //数组第二项即吸附元素选择器或者DOM
});
break;
}
}); $(".skin li").click(function(){
//单个使用
//layer.open({
// skin: 'demo-class2'
//});
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
skin: 'demo-class1'
})
var rel = $(this).attr("rel");
switch(rel){
case "1" :
layer.open({
type:0,
title: 'skin',
content: 'demo-class1'
});
break;
case "2" :
layer.open({
type:0,
title: 'skin',
content: 'demo-class2',
skin: 'demo-class2'
});
break;
case "3" :
layer.open({
type:0,
title: 'skin',
content: 'layui-layer-lan',
skin: 'layui-layer-lan'//目前layer内置的skin有：layui-layer-lan、layui-layer-molv
});
break;
case "4" :
layer.open({
type:0,
title: 'skin',
content: 'layui-layer-molv',
skin: 'layui-layer-molv'//目前layer内置的skin有：layui-layer-lan、layui-layer-molv
});
break;
}
}); $(".area li").click(function(){
var rel = $(this).attr("rel");
switch(rel){
case "1" :
layer.open({
type:0,
title: 'area',
content: 'auto'
});
break;
case "2" :
layer.open({
type:0,
title: 'area',
content: '500px 300px',
area: ['500px', '300px']
});
break;
}
}); $(".offset li").click(function(){
var rel = $(this).attr("rel");
switch(rel){
case "1" :
layer.open({
type:0,
title: 'offset',
content: '左上',
offset:'lt'
});
break;
case "2" :
layer.open({
type:0,
title: 'offset',
content: '右上',
offset:'rt'
});
break;
case "3" :
layer.open({
type:0,
title: 'offset',
content: '左下',
offset:'lb'
});
break;
case "4" :
layer.open({
type:0,
title: 'offset',
content: '右下',
offset:'rb'
});
break;
case "5" :
layer.open({
type:0,
title: 'offset',
content: '居中'
});
break;
case "6" :
layer.open({
type:0,
title: 'offset',
content: 'auto',
offset:['100px','100px']
});
break;
}
}); $(".iconMse li").click(function(){
var rel = $(this).attr("rel");
layer.open({
type: 0,
title: 'icon',
content: '信息框:'+rel,
icon: parseInt(rel)
});
}); $(".iconLoad li").click(function(){
var rel = $(this).attr("rel");
layer.open({
type: 3,
icon: parseInt(rel)
});
}); $(".closeBtn li").click(function(){
var rel = $(this).attr("rel");
layer.open({
type: 0,
title: 'closeBtn',
content: '关闭按钮',
closeBtn: parseInt(rel)
});
}); $(".shade li").click(function(){
var rel = $(this).attr("rel");
switch(rel){
case "1" :
layer.open({
type:0,
title: 'offset',
content: '遮罩层auto'
});
break;
case "2" :
layer.open({
type:0,
title: 'offset',
content: '遮罩层0',
shade:0
});
break;
case "3" :
layer.open({
type:0,
title: 'offset',
content: '遮罩层0.5',
shade:0.5
});
break;
case "4" :
layer.open({
type:0,
title: 'offset',
content: '遮罩层[0.8, #393D49]',
shade:[0.8, '#393D49']
});
break;
}
}); $(".shadeClose li").click(function(){
var rel = $(this).attr("rel");
var b = false;
if(rel == "true"){
b = true;
}
layer.open({
type: 0,
title: 'shadeClose',
content: '关闭按钮'+rel,
shadeClose: b,
shade:0.5
});
}); $(".anim li").click(function(){
var rel = $(this).attr("rel");
layer.open({
type: 0,
title: 'anim',
content: '弹出框出现动画'+rel,
anim: parseInt(rel)
});
});
</script>
</body>
</html>
源码下载地址：http://pan.baidu.com/s/1c2iOmK4 提取码：39zm
关于Layer弹出框初探的更多相关文章
- HTML页面使用layer弹出框输入数据
javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...
- layer弹出框确定前验证:弹出消息框(弹出两个layer)
作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...
- layer弹出框，zIndex不断增加的问题
针对layer弹出框每次进行弹出操作时z-index不断加1的问题,手动设置过zIndex值不管用,每次关闭时清空layer对象也不管用. 解决办法: 修改layer.js,,将红框代码改为绿框代码, ...
- layer弹出框插件参数及方法介绍
layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...
- layer弹出框的用法
页面中引入 layer.js 就行了 1.弹出一个提示信息: layer.msg("我是哦提示信息"); 2.弹出一个带选择的按钮的框 layer.open({ title: ' ...
- jquery的Layer弹出框操作
在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...
- layer弹出框小结
1.layer.open() // 1.打开弹出层 layer.open({ type:1, //基本层类型 icon:, //图标 content:'请核对信息!', //内容 shade:0.3, ...
- layer弹出框中icon数字参数说明
前言icon参数为0,如下代码: layer.msg(}); 运行结果如图: icon参数为1,如下图 icon参数为2,如下图: icon参数为3,如下图: icon参数为4,如下图: icon参数 ...
- layer弹出框的简易封装和使用
1. 封装layer 下载layer绿色版和jquery引入页面 <!DOCTYPE html> <html lang="zh-CN"> . . . < ...
随机推荐
- MVVM模式解析和在WPF中的实现（六） 用依赖注入的方式配置ViewModel并注册消息
MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...
- 11、Struts2 的文件上传和下载
文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...
- nodejs项目mysql使用sequelize支持存储emoji
nodejs项目mysql使用sequelize支持存储emoji 本篇主要记录nodejs项目阿里云mysql如何支持存储emoji表情. 因由 最近项目遇到用户在文本输入emoji进行存储的时候导 ...
- python与c互相调用
虽然python开发效率很高,但作为脚本语言,其性能不高,所以为了兼顾开发效率和性能,通常把性能要求高的模块用c或c++来实现或者在c或c++中运行python脚本来处理逻辑,前者通常是python中 ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 【算法】C语言实现数组的动态分配
C语言实现数组的动态分配 作者:白宁超 2016年10月27日20:13:13 摘要:数据结构和算法对于编程的意义不言而喻,具有指导意义的.无论从事算法优化方向研究,还是大数据处理,亦或者网站开发AP ...
- android 两种实现计时器时分秒的实现，把时间放在你的手中~
可能我们在开发中会时常用到计时器这玩意儿,比如在录像的时候,我们可能需要在右上角显示一个计时器.这个东西其实实现起来非常简单. 只需要用一个控件Chronometer,是的,就这么简单,我都不好意思讲 ...
- Unity3D 5.3 新版AssetBundle使用方案及策略
1.概览 Unity3D 5.0版本之后的AssetBundle机制和之前的4.x版本已经发生了很大的变化,一些曾经常用的流程已经不再使用,甚至一些老的API已经被新的API所取代. 因此,本文的主要 ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- Android 扫描条形码（Zxing插件）
使用Android Studio 一.在build.gradle(Module:app)添加代码 下载,调用插件 1 apply plugin: 'com.android.application' ...