关于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: ...
随机推荐
- 编程风格——代码中特殊的注释技术——TODO、FIXME和XXX的用处
代码中特殊的注释技术——TODO.FIXME和XXX的用处 前言:今天在阅读Qt Creator的源代码时,发现一些注释中有FIXME英文单词,用英文词典居然查不到其意义!实际上,在阅读一些开源代码时 ...
- web标准,可用性和可访问性
web标准,简单的说,是指html,css,JavaScript三者的分离. 网页由三部分组成:结构,表现和行为.对应的标准分为三方面: 1.结构化标准语言XHTML和XML2.表现标准语言主要包括c ...
- 【bzoj2127】happiness 最大流
happiness Time Limit: 51 Sec Memory Limit: 259 MBSubmit: 2579 Solved: 1245[Submit][Status][Discuss ...
- 移动端px转rem的两种方法
rem使用方法: rem ,root element,即相对于根元素的大小,浏览器默认字符大小为16px,此时1rem相当于16px. 方法1 设置font-size: body{font-size ...
- 【03】react 之 创建component
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
- Nginx + tomcat 实现简单集群（基于反向代理方式）
一.安装 nginx 1. nginx依赖以下一些软件库,在安装之前请确保安装了这些软件库,它们包括:gcc,openssl,zlib,pcre(可通过rpm -q命令查询是否已安装) 可通过命令 r ...
- ofbiz16 idea 启动
1.下载gradle并安装到本地 2.idea引入gradle 3.gradle右键选择refresh,项目会重新编译并加载gradle的task 4.可以再编译一下 5.没问题的话打开,jar ap ...
- Extension Methods "点"函数方法 扩展方法
原文发布时间为:2011-03-25 -- 来源于本人的百度文章 [由搬家工具导入] http://msdn.microsoft.com/en-us/library/bb383977.aspx 条件： ...
- [LeetCode] Search a 2D Matrix 二分搜索
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- FZU2187 回家种地(矩形面积并)
矩形面积并(只覆盖一次的面积)的裸题.好久没写代码debug了我太久,太辛酸了. #pragma warning(disable:4996) #include <iostream> #in ...