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

模态框(layer)的更多相关文章

  1. fastadmin模态框(弹出框)

    用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...

  2. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  3. bootstrap模态框通过传值解决重复提交问题

    自己通过模态框确认是否提交的功能时,总是重复提价上次的请求. 原因:重复的原因是jquery通过id绑定了确定按钮的onclick事件,所以每次提交都会增加 一次绑定(没有清除上次的绑定),才造成了重 ...

  4. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  5. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  6. boostrap 模态框

    <div class="modal fade" id="myModal" tabindex="-1" role="dialo ...

  7. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  8. 使用RequireJs和Bootstrap模态框实现表单提交

    下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:

  9. 使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能

    常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...

随机推荐

  1. 菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程

    菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程 Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...

  2. android 4.0主线程訪问网络问题

    在4.0下面,在主线程中訪问网络,假设请求超过6s的话,就会报ANR,那么这就会带来一个问题,假设网络慢或者请求的数据过大时,界面会卡顿,造成界面灵敏性非常差,因此网络请求一般不能放在主线程中操作,g ...

  3. R环境中的工作空间(workspace)

    工作空间(workspace)就是当前R的工作环境,它储存着全部用户定义的对象(向量.矩阵.函数.数据框.列表) . 在一个R会话结束时,你能够将当前工作空间保存到一个镜像中.并在下次启动R时自己主动 ...

  4. SmartSchool CC校友录V8(毕业入世版)

    SmartSchool CC校友录V8(毕业入世版) 使用说明 CC校友录V8(毕业入世版) 主要面向毕业后在某城市工作的校友,给大家构建一个充分交流的平台,“人脉”积累是本软件的功能特色,为此淡化了 ...

  5. 【总结】设备树对platform平台设备驱动带来的变化(史上最强分析)【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74375086 版权声明:本文为博主原创文章,转载请注明http://blog.c ...

  6. 【Codeforces 429D】 Tricky Function

    [题目链接] http://codeforces.com/problemset/problem/429/D [算法] 令Si = A1 + A2 + ... + Ai(A的前缀和) 则g(i,j) = ...

  7. [模板]FWT

    写起来和fft很像,这里放个板子. 代码: #include<iostream> #include<cstdio> #include<cmath> #include ...

  8. geronimo

    时间限制 1s 空间限制 512MB 3.1 题目描述 "Geronimo∼" 时间还很多,让我们慢慢来. 不如听首开心的歌再看题?-- 算了,直接看题吧. 给定一个整数 n,以及 ...

  9. sizeof中的表达式不执行

    char a = 255;      printf("%d\n",a);    printf("%d\n",sizeof(++a));      printf( ...

  10. 9.2NOIP模拟题

    9.2 NOIP模拟 题目名称 “与” 小象涂色 行动!行动! 输入文件 and.in elephant.in move.in 输出文件 and.out elephant.in move.in 时间限 ...