推荐一个好看的模态框(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. });

最新文章

  1. CAP定理
  2. jinja模版
  3. centos7 查询jdk安装路径
  4. Java NIO入门
  5. Subset---poj3977（折半枚举+二分查找）
  6. HDUOJ-----(1162)Eddy's picture（最小生成树）
  7. datazen 备份还原
  8. CSS特殊性
  9. Django ORM 查询管理器
  10. vi命令的常用操作
  11. gnome 3 美化
  12. Python argparse模块实现模拟 linux 的ls命令
  13. java.util.Arrays.useLegacyMergeSort=true 作用
  14. Hadoop生态集群YARN详解
  15. js方法中拼接html时点击事件中拼接字符串参数
  16. LeetCode 985 Sum of Even Numbers After Queries 解题报告
  17. HIVE之 Sqoop 1.4.6 安装、hive与oracle表互导
  18. cookie 知识点
  19. ThreadUtil 多线程处理List,回调处理具体的任务
  20. Why HBase

热门文章

  1. Spring技术内幕：Spring AOP的实现原理（五）
  2. LLDB 常用命令
  3. 【JavaScript】JS读取XML文件并进行搜索
  4. 将jsp页面的<s:iterator>的数据返回到action
  5. BNUOJ 13098 约瑟夫环问题
  6. Office 修改语言
  7. codevs1040统计单词个数（区间+划分型dp）
  8. Git 迁库 标签
  9. Git学习之序
  10. action="post" 、 servletconfig 、 servletcontext 、getPrintWiter() 、context-param、 init-param(第一个完整的servlet)