关于layui-layer独立组件--弹出层
官方下载文档链接：http://layer.layui.com/
===============================================================================
【注意事项】
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
三、jquery需1.8+
四、更多使用说明与演示，请参见layer官网。
=======================================================================================
快速上手文档：http://layer.layui.com/hello.html
下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：(特别说明：需要把整个layer文件夹引入你的文件中，而不是单单引入layer.js文件)
你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：（最简单的示例）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn{
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<div class="btn">点我</div>
<!--你必须先引入jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(".btn").bind("click",function(){
layer.msg('点我的人最美！');
});
</script>
</body>
</html>
$("#btn").bind("click",function(){
//layer.msg('点我的人最美！');
layer.msg('此商品不存在或者已下架，看看其他商品吧！', {
time: 3000
});
});
更多示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 500px;
margin-left: 500px;
}
</style>
</head>
<body>
<div class="btn" id="btn">点我.btn</div>
<div class="btn" id="test2">点我test2</div>
<div class="btn" id="parentIframe">点我parentIframe</div>
<div class="btn" id="test4">点我test4</div>
<div class="btn" id="test5">点我test5</div>
<!--你必须先引入jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg('点我的人最美！');
}); //弹出一个页面层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>'
});
}); //弹出一个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
}); //弹出一个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
}); //弹出一个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
}); });
</script>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="btn" id="btn">点我.btn</div>
<div class="btn" id="test2">点我test2</div>
<div class="btn" id="parentIframe">点我parentIframe</div>
<div class="btn" id="test4">点我test4</div>
<div class="btn" id="test5">点我test5</div> <div class="btn" id="test6">点我test6</div>
<div class="btn" id="test7">点我test7</div>
<div class="btn" id="test8">点我test8</div>
<div class="btn" id="test9">点我test9</div> <!--你必须先引入jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg('点我的人最美！');
}); //弹出一个页面层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>'
});
}); //弹出一个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
}); //弹出一个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
}); //弹出一个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
}); //======================================
//多窗口模式，层叠置顶
$('#test6').on('click', function(){
layer.open({
type: 2 //此处以iframe举例
,title: '当你选择该窗体时，即会在最顶端'
,area: ['390px', '330px']
,shade: 0
,offset: [ //为了演示，随机坐标
Math.random()*($(window).height()-300)
,Math.random()*($(window).width()-390)
]
,maxmin: true
,content: 'settop.html'
,btn: ['继续弹出', '全部关闭'] //只是为了演示
,yes: function(){
$(that).click(); //此处只是为了演示，实际使用可以剔除
}
,btn2: function(){
layer.closeAll();
} ,zIndex: layer.zIndex //重点1
,success: function(layero){
layer.setTop(layero); //重点2
}
});
}); //配置一个透明的询问框
$('#test7').on('click', function(){
layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了', '哦']
});
}); //示范一个公告层
$('#test8').on('click', function(){
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,resize: false
,btn: ['火速围观', '残忍拒绝']
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'http://www.layui.com/'
,target: '_blank'
});
}
});
}); //边缘弹出
$('#test9').on('click', function(){
layer.open({
type: 1
,offset: 'c' //具体配置参考：offset参数项(t、r、b、l、c)
,content: '<div style="padding: 20px 80px;">内容</div>'
,btn: '关闭全部'
,btnAlign: 'c' //按钮居中
,shade: 0 //不显示遮罩
,yes: function(){
layer.closeAll();
}
});
}); });
</script>
</body>
</html>
关于layui-layer独立组件--弹出层的更多相关文章
- layer：web弹出层解决方案
layer:web弹出层解决方案 一.总结 一句话总结:http://layer.layui.com/ 1.layer中弹出层tips的使用(代码)是怎样的? 使用还是比较简单方便的 //tips层- ...
- layer实现关闭弹出层刷新父界面功能详解
本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会 ...
- layui.layer独立组件--解释
网站文档-链接:http://www.layui.com/doc/modules/layer.html layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护 ...
- Vue SPA应用中使用Layer的iframe 弹出层,并且传值
问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...
- layer 关闭当前弹出层
关闭当前框的弹出层 layer.close(layer.index); 刷新父层 parent.location.reload(); // 父页面刷新 关闭iframe 弹出的全屏层 var inde ...
- 浅谈layer.open的弹出层中的富文本编辑器为何不起作用！
很多童鞋都喜欢用贤心的layui框架.是的,我也喜欢用,方便,简单.但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧.这样的话,个别遇到的问题总是解决不好,但是呢还是那 ...
- ui组件--弹出层layer的使用
帮助文档 下载地址 演示地址
- layer（jQuery弹出层插件）
弹窗alert:默认确定按钮+右上角关闭 top.layer.alert("请选择要删除的记录!",{shade: 0.3,offset:'250px'}); 弹窗alert:默认 ...
- layer.open获取弹出层的input框的值
使用top.$('#txtReason').val();获取值: //不通过 function unAuditData(id) { parent.layer.open({ type: , title: ...
随机推荐
- cf 843 A Sorting by Subsequences [建图]
题面: 传送门 思路: 这道题乍一看有点难 但是实际上研究一番以后会发现,对于每一个位置只会有一个数要去那里,还有一个数要离开 那么只要把每个数和他将要去的那个位置连起来,构成了一个每个点只有一个入边 ...
- Apache+Openssl
Apache编译还需要一些依赖: #./configure --prefix……检查编辑环境时出现: checking for APR... no configure: error: APR not ...
- 浅谈 easyui tabs 的href和content属性
众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: ...
- [USACO15JAN]草鉴定Grass Cownoisseur (分层图,最长路,$Tarjan$)
题目链接 Solution 水水的套路题. 可以考虑到一个环内的点是可以都到达的,所以 \(tajan\) 求出一个 \(DAG\) . 然后 \(DAG\) 上的点权值就是 \(scc\) 的大小. ...
- modulus CRT
(吐槽)额..CRT本来就是modulus的么.. CRT是可以每次加一个条件的(当然要保证coprime) 那么我们考虑 x=a (mod p1) x=b (mod p2) 这样的话我们知道 x=a ...
- Origin 2018 的坐标轴中文标签发生倒立/翻转
问题: 在使用 origin 2018 作图时,坐标轴或者是标签中输入中文后,将其更换中文字体(英文字体没有该问题)后发生倒立的情况 解决: 后来发现 Origin 2018 中存在两种中文字体,其中 ...
- git repo gerrit 的关系
Git作为一个版本控制工具,功能很强大,新建分支,切换分支都很快,小团队用Git就能很好地管理好了,但如果是Android系统如此庞大的工程呢,我们知道全套Android源码是很大很大的,目录结构也很 ...
- 【TJOI2015】弦论 （后缀数组）
前言: 多好的题啊! 我理论$O(nlog_2n)$的后缀数组还带个常数26,竟然跑的比$O(n)$的后缀自动机还快,全场 Rak 1? Description 为了提高智商,ZJY开始学习弦论.这一 ...
- Java-01背包问题-动态规划-递归和非递归实现
国际惯例,先上代码,粗略分析: package com.bag; /** * Author: lihao * Date:2017/8/31 * Description: */ public class ...
- cmp 指令
(lldb) disassemble -n comp2 untitled6`comp2: 0x10d065f40 <+>: pushq %rbp 0x10d065f41 <+> ...