<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div class="div1" style="width:50px;border:1px solid #ddd;text-align:center">cc</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script src="layer.js"></script>

<script>

    $(".div1").on("click",function(){

        var val=$(this).html();

        switch (val){

            case "aa":

                layer.open({

                    type: 1,

                    area: ['600px', '360px'],

                    shadeClose: true, //点击遮罩关闭

                    content: '\<\div style="padding:20px;">自定义内容\<\/div>'

                });

                break;

            case "bb":

                layer.open({

                    type: 2,

                    title: 'iframe父子操作',

                    maxmin: true,

                    shadeClose: true, //点击遮罩关闭层

                    area : ['600px' , '320px'],

                    content: 'iframe.html'

                });

                break;

            case "cc":

                layer.tips('Hello tips!', '.div1');

                break;

            default:

                layer.msg("666");

        }

    })

</script>

</html>

jq layer插件使用的更多相关文章

  1. jq分页插件

    jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...

  2. 怎么用jq封装插件

    怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...

  3. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...

  4. layer插件学习——弹框（自定义页）

    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...

  5. layer插件学习——提示层

    本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...

  6. layer插件学习——询问框

    本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...

  7. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  8. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  9. layer插件open方法回掉值问题

    最近做项目需用到一个弹出层加载iframe页面的东西,首先想到layer插件,此插件用到过多次,兼容性很好,功能也强大,废话不多说上代码. 其实功能很简单,就是在目标页面选择一个值,回掉回来,说明一下 ...

随机推荐

  1. django下的ckeditor 5.0 文本编辑器上传功能。

    完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...

  2. Spring中MultipartHttpServletRequest实现文件上传

    Spring中MultipartHttpServletRequest实现文件上传 转贴自:http://my.oschina.net/nyniuch/blog/185266 实现图片上传  用户必须能 ...

  3. 扩展duilib edit控件的提示功能和多种文字颜色(解决edit为password显示不正常的bug)

    参考博客:Redrain 转载:http://blog.csdn.net/zhuhongshu/article/details/41786407 在Redrain博客的基础上做了修改 1.CEditU ...

  4. 4-JS对象

    js中哪些是对象 除了字符串.数字.false.true.null和undefined之外,JavaScript中的值都是对象 原型(prototype) 每一个JavaScript对象(null除外 ...

  5. QQ邮箱

    yourTEXThere

  6. 【转载】.NET面试题系列[0] - 写在前面

    原文:.NET面试题系列[0] - 写在前面 索引: .NET框架基础知识[1] - .NET框架基础知识(1) http://www.cnblogs.com/haoyifei/p/5643689.h ...

  7. linux下导入、导出mysql数据库命令

    一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): 1.导出数据和表结构: mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql #/usr ...

  8. FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...

  9. PhpStorm的注册码、Key

    下面是PhpStorm的注册码.Key,其license由用户名和License值组成. User name: EMBRACE License key: ===== LICENSE BEGIN === ...

  10. ubuntu 卸载/安装 redis

    ubuntu 卸载redis 1. 卸载软件 apt-get remove redis 2. 清除配置 apt-get remove --purge redis 3. 删除残留文件 find / -n ...