弹窗组件layer学习笔记-open方法

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层不会消失