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. PAT 1057

    Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...

  2. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  3. STM32之呼吸灯实验

    首先,我想引用一下在一片博文里 看到 的一段话,写的很详细, 首先来说,你要使用PWM模式你得先选择用那个定时器来输出PWM吧!除了TIM6.TIM7这两个普通的定时器无法输出PWM外,其余的定时器都 ...

  4. webstorm快捷键收集【转发】

    WebStorm快捷键收集   1.webstorm快捷键: IntelliJ-Idea 的快捷键 Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ ) Shift+F6 重构- ...

  5. bzoj1798 [Ahoi2009]维护序列

    Description 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2 ...

  6. lighttpd启动问题

    /home/yuna/web/app/lighttpd/sbin/lighttpd -f /home/yuna/web/app/lighttpd/lighttpd.conf -m /home/yuna ...

  7. Supervisor: A Process Control System

    Supervisor: 进程控制系统 概述:Supervisor是一个 Client/Server模式的系统,允许用户在类unix操作系统上监视和控制多个进程,或者可以说是多个程序. 它与launch ...

  8. vue的Virtual Dom实现- snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...

  9. Hadoop集群

    你可以用以下三种支持的模式中的一种启动Hadoop集群: 单机模式 伪分布式模式 完全分布式模式 单机模式的操作方法 默认情况下,Hadoop被配置成以非分布式模式运行的一个独立Java进程.这对调试 ...

  10. 使用java API操作hdfs--读取hdfs文件并打印

    在myclass之中创建类文件,这个myclass目录是自己创建的. 编译的时候会报如下的错误: 很明显就是没有导入包的结果 见这个API网站,则可以找到响应的包,当然还有java的api文档 htt ...