关于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: ...
随机推荐
- [NOI2008][bzoj1061] 志愿者招募 [费用流+巧妙的建图]
题面 传送门 思路 引入:网络流? 看到这道题,第一想法是用一个dp来完成决策 但是,显然这道题的数据并不允许我们进行dp,尤其是有10000种志愿者的情况下 那么我们就要想别的办法来解决: 贪心?这 ...
- [luoguP2596] [ZJOI2006]书架（splay）
传送门 题目中的几个操作,直接splay搞一下即可: 把s旋转到根,左子树接到右子树 把s旋转到根,右子树接到左子树 交换s相邻的信息即可 把s旋转到根,左子树的大小即为答案 找第k大 没了 #inc ...
- vmware虚拟机无法ping通主机，也无法联网
- python（5）-- 函数
python 函数 定义:函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 使用好处:函数能提高应用的模块性,和代码的重复利用率. 分类:(1)python 内建函数:pytho ...
- iOS飘雪的动画小demo
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ UIImage ...
- Window下安装使用RabbitMQ
RabbitMQ官网 http://www.rabbitmq.com 下载地址 http://www.rabbitmq.com/download.html 一 Windows下安装RabbitMq 1 ...
- 一些汇编中的 trick
1. PC 总是指向下一条将要被执行的指令,而不是指向正在被执行的指令,这是有道理的,因为执行指令不是一个 atom 过程,而是分成了好多步骤,在执行指令的过程中 cpu 完全有可能将下一条将要执行的 ...
- gridview行链接
原文发布时间为:2009-04-21 -- 来源于本人的百度文章 [由搬家工具导入] 点击行,链接!! 可这样,在GridView的RowDataBound输入代码,假如id在第0列,且不是摸板列: ...
- 转一个网址,canvas用法
http://blog.csdn.net/jia20003/article/details/9251893 http://www.w3school.com.cn/cssref/pr_animation ...
- requireJs杂项
如果设置了baseUrl,那么baseUrl目录下的模块可以被加载,那么被加载之后的模块Id是什么?文件名吗? 入口函数的写法?是不是要执行,后面加() 中文网中指的优化工具是什么? ...