layer - 简单好用的Web弹出层组件使用详解6（弹出框的样式、参数设置）
十二、样式修改
1，标题样式（title）
（1）title 属性除了可以简单地设置标题文字外，还可以附带上相关的 CSS 样式。
layer.alert('欢迎访问 hangge.com', {
title: ["我是标题", "font-size:18px;color:orange"]
});
（2）也可以直接不显示标题栏。
layer.alert('欢迎访问 hangge.com', {
title: false
});
2，样式类名（skin）
（1）skin 属性可以传入 layer 内置的皮肤样式 class 名来改变整个弹出框的样式。下面分别是 layui-layer-lan、layui-layer-molv 和 layui-layer-hui 这三个 skin 效果。
layer.alert('欢迎访问 hangge.com', {
skin: 'layui-layer-molv'
});
（2）我们也可以自定义的 class 名，从而实现自定义风格。
<style>
.demo-class .layui-layer-title{background:orange; color:#fff; border: none;}
.demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
.demo-class .layui-layer-btn a{background:#333;}
.demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
</style>
<script>
layer.alert('欢迎访问 hangge.com', {
skin: 'demo-class'
});
</script>
3，宽高（area）
（1）默认情况下弹出框的宽高都自适应的。我们可以对宽度设置固定值，然后高度仍然自适应。
layer.alert('欢迎访问 hangge.com', {
area: '500px'
});
（2）也可以将宽高都设置为固定值。
layer.alert('欢迎访问 hangge.com', {
area: ['500px', '300px']
});
4，最大宽度（maxWidth）
（1）只有当 area: 'auto' 时，maxWidth 的设定才有效。
（2）maxWidth 默认值为：360
5，最大高度（maxHeight）
（1）只有当高度自适应时，maxHeight 的设定才有效。
（2）maxHeight 无默认值。
（2）三种情况下的显示效果分别如下：
（2）如果将 shade 设置为 0，则表示不需要遮罩（提示框变成非模态的）
（3）也可以将将遮罩自定义成其他的颜色。
6，图标（icon）
通过 icon 配置属性我们可以在提示框内容前面显示个图片。根据传入的数字不同（0 ~ 6），共有如下 7 种图标。
layer.msg('欢迎访问 hangge.com', {
icon: 6
});
7，按钮排列方式（btnAlign）
（1）使用 btnAlign 属性可以设置按钮的对齐方式：
- l：左对齐
- c：居中对其
- r：右对齐（默认值）
（2）下面将按钮改成居中对齐。
layer.confirm('确定要删除吗?', {
btnAlign:'c'
}, function(index){
//点击确定后的回调
//do something
layer.close(index);
});
8，关闭按钮样式（closeBtn）
（1）closeBtn 参数可以设置关闭按钮样式，具体可选值如下：
- 0：不显示关闭按钮
- 1：第一种样式（默认）
- 2：第二种样式
layer.alert('欢迎访问 hangge.com', {
closeBtn: 2
});
（2）三种情况下的显示效果分别如下：
9，遮罩背景（shade）
（1）默认情况下遮罩是 0.3 透明度的黑色背景。我们可以使用 shade 来修改透明度，比如下面改成完全不透明。
layer.alert('欢迎访问 hangge.com', {
shade: 1
});
（2）如果将 shade 设置为 0，则表示不需要遮罩（提示框变成非模态的）
layer.alert('欢迎访问 hangge.com', {
shade: 0
});
（3）也可以将将遮罩自定义成其他的颜色。
layer.alert('欢迎访问 hangge.com', {
shade: [0.8, '#393D49']
});
10，点击遮罩后关闭提示框（shadeClose）
默认情况下只有点击提示框上的关闭按钮才可以将其关闭，我们也可以将 shadeClose 设为为 true，从而实现点击弹层外区域（遮罩）也可以关闭提示框。
layer.alert('欢迎访问 hangge.com', {
shadeClose: true
});
11，自动关闭时间（time）
默认情况下弹出框不会自动关闭。我们可以使用 time 设置自动关闭时间，单位是毫秒（1秒 = 1000毫秒）
layer.alert('欢迎访问 hangge.com', {
time: 2000 //2秒后自动关闭
});
12，弹出层的唯一标识（id）
设置 id 值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和 iframe 层模式。
13，弹出框位置固定（fixed）
即鼠标滚动时，层是否固定在可视区域。默认为 true，表示不随视图的滚动而滚动。如果不想固定位置，设置 fixed: false 即可。
14，是否允许拉伸（resize）
默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对需要指定的弹层屏蔽该功能，设置 false 即可。
（注意：该参数对 loading、tips 层无效。）
15，是否允许浏览器出现滚动条（scrollbar）
scrollbar 属性允许浏览器滚动：
- true：表示允许滚动（默认值）
- false：屏蔽浏览器窗口滚动条（即原来页面如果有滚动条，弹出提示框时滚动条消失，关闭提示框滚动条又出现）
layer.alert('欢迎访问 hangge.com', {
scrollbar: false //弹出时屏蔽页面滚动条
});
16，层叠顺序（zIndex）
（1）zIndex 属性一般用于解决和其它组件的层叠冲突。
（2）zIndex 默认值为：19891014
17，拖动功能设置（move）
（1）move 默认值为 .layui-layer-title，表示触发标题区域的拖拽。比如我们可以改成在内容区域上可以拖动窗口。
layer.alert('欢迎访问 hangge.com', {
move: '.layui-layer-content' //改成在内容区域上可以拖动窗口
});
（2）我们也可以将 move 设定为 false 来禁止拖拽。
layer.alert('欢迎访问 hangge.com', {
move: false //弹出框无法拖动
});
18，是否允许拖拽到窗口外（moveOut）
（1）默认值为：false，表示只能在窗口内拖拽。（2）如果想让提示框可以拖到窗口外，那么设定 moveOut: true 即可。
