模态框（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. });