layui.layer的文档

基础参数

我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ''})layer.msg('', {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块

type - 基本层类型

title - 标题

content - 内容

skin - 样式类名

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：

codelayui.code

1. /!*
2. 如果是页面层
3. */
4. layer.open({
5. type: 1,
6. content: '传入任意的文本或html' //这里content是一个普通的String
7. });
8. layer.open({
9. type: 1,
10. content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
11. });
12. //Ajax获取
13. $.post('url', {}, function(str){
14. layer.open({
15. type: 1,
16. content: str //注意，如果str是object，那么需要字符拼接。
17. });
18. });
19. /!*
20. 如果是iframe层
21. */
22. layer.open({
23. type: 2,
24. content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
25. });
26. /!*
27. 如果是用layer.open执行tips层
28. */
29. layer.open({
30. type: 4,
31. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
32. });
33.  

类型：String，默认：''

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

codelayui.code

1.  
2. //单个使用
3. layer.open({
4. skin: 'demo-class'
5. });
6. //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
7. layer.config({
8. skin: 'demo-class'
9. })
10. //CSS
11. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
12. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
13. body .demo-class .layui-layer-btn a{background:#333;}
14. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
15. …
16. 加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。
17.  

你也可以去查看layer皮肤制作说明