模态框（layer）

推荐一个好看的模态框(layer)   地址：http://layer.layui.com/

相应列子及配置  全部来自于官网，可直接访问官网学习了解。

1. //信息框-例1
2. layer.alert(‘见到你真的很高兴‘, {icon: 6});
3. //信息框-例2
4. layer.msg(‘你确定你很帅么？‘, {
5. time: 0 //不自动关闭
6. ,btn: [‘必须啊‘, ‘丑到爆‘]
7. ,yes: function(index){
8. layer.close(index);
9. layer.msg(‘雅蠛蝶 O.o‘, {
10. icon: 6
11. ,btn: [‘嗷‘,‘嗷‘,‘嗷‘]
12. });
13. }
14. });
15. //信息框-例3
16. layer.msg(‘这是最常用的吧‘);
17. //信息框-例4
18. layer.msg(‘不开心。。‘, {icon: 5});
19. //信息框-例5
20. layer.msg(‘玩命卖萌中‘, function(){
21. //关闭后的操作
22. });
23. //页面层-自定义
24. layer.open({
25. type: 1,
26. title: false,
27. closeBtn: 0,
28. shadeClose: true,
29. skin: ‘yourclass‘,
30. content: ‘自定义HTML内容‘
31. });
32. //页面层-佟丽娅
33. layer.open({
34. type: 1,
35. title: false,
36. closeBtn: 0,
37. area: ‘516px‘,
38. skin: ‘layui-layer-nobg‘, //没有背景色
39. shadeClose: true,
40. content: $(‘#tong‘)
41. });
42. //iframe层-父子操作
43. layer.open({
44. type: 2,
45. area: [‘700px‘, ‘450px‘],
46. fixed: false, //不固定
47. maxmin: true,
48. content: ‘test/iframe.html‘
49. });
50. //iframe层-多媒体
51. layer.open({
52. type: 2,
53. title: false,
54. area: [‘630px‘, ‘360px‘],
55. shade: 0.8,
56. closeBtn: 0,
57. shadeClose: true,
58. content: ‘//player.youku.com/embed/XMjY3MzgzODg0‘
59. });
60. layer.msg(‘点击任意处关闭‘);
61. //iframe层-禁滚动条
62. layer.open({
63. type: 2,
64. area: [‘360px‘, ‘500px‘],
65. skin: ‘layui-layer-rim‘, //加上边框
66. content: [‘mobile/‘, ‘no‘]
67. });
68. //加载层-默认风格
69. layer.load();
70. //此处演示关闭
71. setTimeout(function(){
72. layer.closeAll(‘loading‘);
73. }, 2000);
74. //加载层-风格2
75. layer.load(1);
76. //此处演示关闭
77. setTimeout(function(){
78. layer.closeAll(‘loading‘);
79. }, 2000);
80. //加载层-风格3
81. layer.load(2);
82. //此处演示关闭
83. setTimeout(function(){
84. layer.closeAll(‘loading‘);
85. }, 2000);
86. //加载层-风格4
87. layer.msg(‘加载中‘, {
88. icon: 16
89. ,shade: 0.01
90. });
91. //打酱油
92. layer.msg(‘尼玛，打个酱油‘, {icon: 4});
93. //tips层-上
94. layer.tips(‘上‘, ‘#id或者.class‘, {
95. tips: [1, ‘#0FA6D8‘] //还可配置颜色
96. });
97. //tips层-右
98. layer.tips(‘默认就是向右的‘, ‘#id或者.class‘);
99. //tips层-下
100. layer.tips(‘下‘, ‘#id或者.class‘, {
101. tips: 3
102. });
103. //tips层-左
104. layer.tips(‘左边么么哒‘, ‘#id或者.class‘, {
105. tips: [4, ‘#78BA32‘]
106. });
107. //tips层-不销毁之前的
108. layer.tips(‘不销毁之前的‘, ‘#id或者.class‘, {
109. tipsMore: true
110. });
111. //默认prompt
112. layer.prompt(function(val, index){
113. layer.msg(‘得到了‘+val);
114. layer.close(index);
115. });
116. //屏蔽浏览器滚动条
117. layer.open({
118. content: ‘浏览器滚动条已锁‘,
119. scrollbar: false
120. });
121. //弹出即全屏
122. var index = layer.open({
123. type: 2,
124. content: ‘http://layim.layui.com‘,
125. area: [‘320px‘, ‘195px‘],
126. maxmin: true
127. });
128. layer.full(index);
129. //正上方
130. layer.msg(‘灵活运用offset‘, {
131. offset: ‘t‘,
132. anim: 6
133. });

原文地址：https://www.cnblogs.com/wxxf/p/9368848.html