弹窗组件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层不会消失