模态框（layer）

Posted 2020-12-25 wxxf

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

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

1. //信息框-例1

2. layer.alert(‘见到你真的很高兴‘, {icon: 6});

4. //信息框-例2

5. layer.msg(‘你确定你很帅么？‘, {
6. time: 0 //不自动关闭
7. ,btn: [‘必须啊‘, ‘丑到爆‘]
8. ,yes: function(index){
9. layer.close(index);
10. layer.msg(‘雅蠛蝶 O.o‘, {
11. icon: 6
12. ,btn: [‘嗷‘,‘嗷‘,‘嗷‘]
13. });
14. }
15. });

16. //信息框-例3

17. layer.msg(‘这是最常用的吧‘);

18. //信息框-例4

19. layer.msg(‘不开心。。‘, {icon: 5});

20. //信息框-例5

21. layer.msg(‘玩命卖萌中‘, function(){
22. //关闭后的操作
23. });

24. //页面层-自定义

25. layer.open({
26. type: 1,
27. title: false,
28. closeBtn: 0,
29. shadeClose: true,
30. skin: ‘yourclass‘,
31. content: ‘自定义html内容‘
32. });

33. //页面层-佟丽娅

34. layer.open({
35. type: 1,
36. title: false,
37. closeBtn: 0,
38. area: ‘516px‘,
39. skin: ‘layui-layer-nobg‘, //没有背景色
40. shadeClose: true,
41. content: $(‘#tong‘)
42. });

43. //iframe层-父子操作

44. layer.open({
45. type: 2,
46. area: [‘700px‘, ‘450px‘],
47. fixed: false, //不固定
48. maxmin: true,
49. content: ‘test/iframe.html‘
50. });

51. //iframe层-多媒体

52. layer.open({
53. type: 2,
54. title: false,
55. area: [‘630px‘, ‘360px‘],
56. shade: 0.8,
57. closeBtn: 0,
58. shadeClose: true,
59. content: ‘//player.youku.com/embed/XMjY3MzgzODg0‘
60. });
61. layer.msg(‘点击任意处关闭‘);

62. //iframe层-禁滚动条

63. layer.open({
64. type: 2,
65. area: [‘360px‘, ‘500px‘],
66. skin: ‘layui-layer-rim‘, //加上边框
67. content: [‘mobile/‘, ‘no‘]
68. });

69. //加载层-默认风格

70. layer.load();
71. //此处演示关闭
72. setTimeout(function(){
73. layer.closeAll(‘loading‘);
74. }, 2000);

75. //加载层-风格2

76. layer.load(1);
77. //此处演示关闭
78. setTimeout(function(){
79. layer.closeAll(‘loading‘);
80. }, 2000);

81. //加载层-风格3

82. layer.load(2);
83. //此处演示关闭
84. setTimeout(function(){
85. layer.closeAll(‘loading‘);
86. }, 2000);

87. //加载层-风格4

88. layer.msg(‘加载中‘, {
89. icon: 16
90. ,shade: 0.01
91. });

92. //打酱油

93. layer.msg(‘尼玛，打个酱油‘, {icon: 4});

94. //tips层-上

95. layer.tips(‘上‘, ‘#id或者.class‘, {
96. tips: [1, ‘#0FA6D8‘] //还可配置颜色
97. });

98. //tips层-右

99. layer.tips(‘默认就是向右的‘, ‘#id或者.class‘);

100. //tips层-下

101. layer.tips(‘下‘, ‘#id或者.class‘, {
102. tips: 3
103. });

104. //tips层-左

105. layer.tips(‘左边么么哒‘, ‘#id或者.class‘, {
106. tips: [4, ‘#78BA32‘]
107. });

108. //tips层-不销毁之前的

109. layer.tips(‘不销毁之前的‘, ‘#id或者.class‘, {
110. tipsMore: true
111. });

112. //默认prompt

113. layer.prompt(function(val, index){
114. layer.msg(‘得到了‘+val);
115. layer.close(index);
116. });

117. //屏蔽浏览器滚动条

118. layer.open({
119. content: ‘浏览器滚动条已锁‘,
120. scrollbar: false
121. });

122. //弹出即全屏

123. var index = layer.open({
124. type: 2,
125. content: ‘http://layim.layui.com‘,
126. area: [‘320px‘, ‘195px‘],
127. maxmin: true
128. });
129. layer.full(index);

130. //正上方

131. layer.msg(‘灵活运用offset‘, {
132. offset: ‘t‘,
133. anim: 6
134. });