layui.layer 弹出层使用

layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块
1. 获取laery,你需要去官网下载laery.js 地址--http://layer.layui.com/

2. 引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3. 使用laery.open();

function show(){var a = layer.open({type: 2,area: ['80%','450px'],title: '我是标题',shadeClose: true,content: ['layer_model.html','no']});
}

基础参数
1. type 类型

type: 1,  // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

2. title 标题

title:"我是标题",
//若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;'] 数组第二项可以写任意css样式；
//如果你不想显示标题栏，你可以 title: false

3. content 内容

3.1.如果是页面层

layer.open({type: 1, content: '传入任意的文本或html' //这里content是一个普通的String
});layer.open({type: 1,content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});//Ajax获取
$.post('url', {}, function(str){layer.open({type: 1,content: str //注意，如果str是object，那么需要字符拼接。});
});

示例:

3.2.如果是iframe层

layer.open({type: 2, content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

示例:

3.3.如果是用layer.open执行tips层

layer.open({type: 4,content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

示例:

4. area 宽高
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以 area: ['500px', '300px']

5. btn 按钮
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：

layer.open({content: 'test',btn: ['按钮一', '按钮二', '按钮三'],yes: function(index, layero){//按钮【按钮一】的回调},btn2: function(index, layero){//按钮【按钮二】的回调//return false 开启该代码可禁止点击该按钮关闭},btn3: function(index, layero){//按钮【按钮三】的回调//return false 开启该代码可禁止点击该按钮关闭},cancel: function(){ //右上角关闭回调//return false 开启该代码可禁止点击该按钮关闭}
});

6, shade 遮罩
即弹层外区域。默认是0.3透明度的黑色背景（'#000'）如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
如果你的遮罩是存在的那么你还可以设置 shadeClose 是否点击遮罩关闭默认：false 如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭

layui.layer 弹出层使用相关推荐

php layer弹出层更改背景,layui.layer 弹出层背景透明，前景无阴影实现方案
先上具体实现方法. 首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):.myskin{ background-colo ...
layui + layer弹出层增删改的操作
一.弹出层说明 /* ========== 弹出层说明 ==============*/function useradd() { // useradd(),点击事件//var pageNum = $( ...
layui layer弹出层通过offset属性定位弹出层在光标处弹出(event.clientY和event.clientX)失败。
将弹出层弹出位置定位到光标处,大小超过父弹出层的部分无法显示 .js //页面层-自定义 $("#more").click(function (event) {layer.open ...
前端ui框架layui——layer弹出层-弹出框方法
----------弹出框方法----------------- 1.layer.open(options) - 原始核心方法基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.o ...
前端ui框架layui——layer弹出层-内置方法
提示:本页内容所展示的内置方法是除了所有弹出方法(eg:layer.open)以外的,想看弹出方法请到这里 --------内置方法---------- 1.layer.config(options) ...
在layui layer 弹出层中加载 layui table
1 layui.use('table', function(){ 2 var table = layui.table; 3 layer.open({ 4 type : 1, 5 area : [ &q ...
layui内置模块（layer弹出层）
前面我们已经对layui前端框架的页面元素进行了简单的学习,但是作为一个可用的程序,仅仅是长的好看,并没有那个什么用:在好看的同时还需要实用和酷炫,实用就需要实现我们方便的和后端进行数据交互,酷炫就是 ...
layui弹出层闪退，layer弹出层闪退，layer弹出层坑
这两天用layui的弹出层插件,发现两奇怪的问题: 1.弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2.绑定弹出层到按钮,打开弹窗闪退后面发现真如参考博文所说 ...
layui弹出层html,layer弹出层
layer 弹出层,怎么只让他弹出一次.在线等我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中.这是组件不完美的地方,他设置了top和left值,而且是固定的.这种弹出层都是绝对定位的所 ...

layui.layer 弹出层使用

layui.layer 弹出层使用相关推荐

最新文章

热门文章