layer.open()是使用最多的方法,基本上弹窗都是用这个方法来实现
先来看一个简单的示例:
<link href="js/layui/css/layui.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/layui/layui.js"></script>
<script type="text/javascript">
$(function () {
//在layui中使用layer
layui.use(['layer'], function () {
var layer = layui.layer;
layer.open({
//类型
type: 1,
//标题
title: ['标题','font-size:18px;'],
//内容
content:'弹窗内容'
})
})
})
</script>
参数说明:
type:layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)。这里基本只用type就可以实现默认弹窗,tips除外
title:标题不用多说,只是注意可以自定义样式
content:弹窗的内容。content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
这里说明一下,不同type对应的content的值不同.
ifame必须是正确的URL,例如:content:'child.html';
tips必须包含吸附器,例如:content:['提示','#tip'];#tip是页面中的元素的id;
其他类型可以使用字符串、html标签
content还可以直接使用页面内的dom,例如:content:$('#test'),这个#test也是页面内的元素的id,注意这个元素最好是在body的最外层,以免被其他元素影响。
其他参数:
skin:layer样式类名,目前layer内置了两种:layui-layer-lan,layui-layer-molv;
我们也可以自定义
<link href="js/layui/css/layui.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/layui/layui.js"></script>
<style>
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
</style>
<script type="text/javascript">
$(function () {
//在layui中使用layer
layui.use(['layer'], function () {
var layer = layui.layer;
layer.open({
//类型
type: 1,
//标题
title: ['标题','font-size:18px;'],
//内容
content: '内容',
skin: 'demo-class',//'layui - layer - molv'
})
})
})
</script>
area:弹窗的宽度和高度,默认是自适应的,你也可以自定义,如:area:['500px','400px'];
offset:弹窗坐标,默认是居中的;
icon:图标,信息框和加载层使用,默认不显示(-1),可以设置0-6;加载层只是使用0-2;
btn:信息库默认是一个确认按钮,其他层不显示;如果需要使用,则使用btn;第一个按钮回调是yes,其他按钮回调是btn:function(){}。
示例:
<link href="js/layui/css/layui.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/layui/layui.js"></script>
<script type="text/javascript">
$(function () {
//在layui中使用layer
layui.use(['layer'], function () {
var layer = layui.layer;
layer.open({
//类型
type: 1,
//标题
//内容
content: $('#outer'),
skin: 'demo-class',//'layui - layer - molv'
btn: ['1', '2', '3'],
yes: function (index, layero) {
alert(index)
return false;
},
btn2: function (index, layero) {
alert(index)
return false;
},
btn3: function (index, layero) {
alert(index)
return false;
}
})
})
})
</script>
注意这里的btn2,btn3,跟按钮名称无关;使用return false,可以阻止弹窗关闭
btnAlign:按钮对齐方式,默认是右对齐;可用值:l,c,r
closeBtn:关闭按钮,layer提供了两种方式的关闭按钮1和2,closeBtn:0,则不显示
shade:弹窗遮罩,默认0.3,颜色‘#000’,可自定义,shade[0.5,'#aa44dd'],shade:0,则不显示
shadeClose:是否点击遮罩关闭,默认false
time:自动关闭所需毫秒,默认不会自动关闭,可设置time:5000
id:弹窗标识,设置后只允许同时弹出一个,一般用于页面层和iframe层
anmi:弹出动画,支持类型0-6,anim:-1,则不显示
isOutAnim:关闭时动画,默认true
fixed:当鼠标滚动时,层是否固定,默认true
resize:是否允许拉伸,默认true,通过右下角拉伸
scrollBar:是否允许浏览器出现滚动条
maxWdith:最大宽度
maxHeight:最大高度
zIndex:层叠顺序
tops:tips层的参数,支持上右下左四个方向,通过1-4进行方向设定
tipsMore:是否允许多个tips层,意味这之前的tips层不会消失