layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

插件官方地址：http://layer.layui.com/

layer 甚至兼容了包括IE6在内的所有主流浏览器。

少说多做，代码演示（拷贝直接运行）：

 <!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <title>弹出框插件layer使用</title>

     </head>

     <body>

         <div class="clearfix layer-area" id="chutiyan">

             <a class="layui-btn layui-btn-primary" href="javascript:;">alert弹出框</a>

             <a class="layui-btn layui-btn-primary" href="javascript:;">confirm弹出框</a>

         </div>

         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

         <script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

         <script type="text/javascript">

             $('#chutiyan>a').on('click', function() {

                 var othis = $(this),

                     index = othis.index();

                 switch(index) {

                     case 0:

                         layer.alert('弹出框内容', {

                             icon: -1,

                             shadeClose: true,

                             title: '弹出框标题'

                         });

                         break;

                     case 1:

                         layer.confirm('您是如何看待前端开发？', {

                             btn: ['重要', '奇葩'] //按钮

                         }, function() {

                             layer.msg('重要', {

                                 icon: 1

                             });

                         }, function() {

                             layer.msg('奇葩', {

                                 icon: 1

                             });

                         });

                         break;

                     default:

                         layer.msg('Hi!');

                         break;

                 }

             });

         </script>

     </body>

 </html>

效果：

（1）alert弹出框

（2）confirm弹出框

3、总结

layer弹出框插件可保证所有浏览器弹出框效果一致，并且兼容IE6以上所有的浏览器，显著提升网站逼格。推荐使用。

弹出框插件layer使用的更多相关文章

  1. 弹出框插件——dialog

    基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...

  2. layer弹出框插件参数及方法介绍

    layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...

  3. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  4. jQuery+css3弹出框插件

    先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...

  5. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  6. jQuery zxxbox弹出框插件(v3.0)

    插件地址: http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html

  7. bootbox弹出框插件

    具体用法查看官网http://bootboxjs.com/examples.html {% load staticfiles %} <!DOCTYPE html> <html lan ...

  8. BootStrap弹出框插件popover简单实例

    1.网上实例地址 http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html 2.具体demo     $("#pieId&q ...

  9. 弹出框layer插件

    有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...

随机推荐

  1. Jmeter的逻辑控制器——Controller

    逻辑控制器(Logic Controller) --贯穿整个Test Plan中,与各组件执行顺序没关系:目的是用于控制采样器的执行顺序. Simple Controller Simple Contr ...

  2. memcached分布式缓存

    1.memcached分布式简介 memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能.Memcache集群主机不能够相互通信传输数据,它的“分布式”是基于客户端的程序逻辑算 ...

  3. 浩哥解析MyBatis源码（十一）——Parsing解析模块之通用标记解析器（GenericTokenParser）与标记处理器（TokenHandler）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6724223.html 1.回顾 上面的几篇解析了类型模块,在MyBatis中类型模块包含的 ...

  4. C++ struct 初始化的问题

    struct student { int age; string name; int id; }; 初始化: student st1={10, "li ming", 01}; 修改 ...

  5. python安装win32api pywin32 后出现 ImportError: DLL load failed

    ImportError: DLL load failed: \xd5\xd2\xb2\xbb\xb5\xbd\xd6\xb8\xb6\xa8\xb5\xc4\xc4\xa3\xbf\xe9\xa1\x ...

  6. PMD教程

    1.单词 violations outline:错误大纲2.错误级别 红色 很高的错误 橙色 错误 黄色 很高的警告 绿色 警告 蓝色 输出信息3.提示 Avoid excessively long ...

  7. 篇3 安卓app自动化测试-搞定界面元素

    篇3                 安卓app自动化测试-搞定界面元素 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),今天是<安卓app自动化测试>的第三 ...

  8. OK 开始实践书上的项目一：即使标记

    OK 开始实践书上的项目一:及时标记 然而....又得往前面看啦! ----------------------我是分割线------------------------ 代码改变世界

  9. 用PetaPoco为ASP.NET已有数据库建模

    序:最近一直在抓紧重构公司的网站,没有很多时间去写博客,积累了很多的问题,几乎是一天一个,折腾死了,尤其是在模型方面几经周折. 以前,多半从事PHP开发,很少接触到模型(thinkphp中模型),但是 ...

  10. DOS(Disk Operation System:磁盘操作系统)常见命令

    学习Java语言的第一节课总是练习DOS命令,用记事本敲出自己的第一个Java语言的HelloWorld程序案例,在此特意总结一下基本的DOS命令以作记录和分享. Windows+R快捷键---> ...