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. Ubuntu 16.04系统下安装PHP5.6*

    Ubuntu 16.04系统默认php7,并没有php5*的包,所以需要自己安装: 方法: 1.删除所有的php包列出安装的php包,dpkg -l | grep php| awk '{print $ ...

  2. DOM的发展，DOM0,DOM1,DOM2,DOM3

    Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口(API Application programming Interface).DOM把整个界面 ...

  3. Nginx反向代理以及负载均衡配置

    项目地址:http://git.oschina.net/miki-long/nginx 前提:最近在研究nginx的用法,在windows上小试了一下,由于windows下不支持nginx缓存配置,所 ...

  4. 【卸载】oracle卸载

    Oracle卸载比较麻烦,不能简单卸载就完成了,有时没有卸载完整,下次安装不能很好的安装: 当然Oracle卸载也没有那么难,只是步骤比较多.Oracle10g还是Oracle11g卸载步骤都是一样的 ...

  5. User Browsing Model简介

    搜索引擎的点击日志提供了很多有价值的query-doc相关性信息,但是这些信息是有偏的,因为对于用户没有点击过的doc,我们无法确定其是否真实地被用户浏览过.即日志中记录的展现信息与实际的展现信息之间 ...

  6. 【BFS + Hash】拼图——携程2017春招编程题2

    写在前面 前天参加了携程的网测--还是感觉自己太!渣!了!    _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...

  7. QT链接数据库

    在介绍QT与数据的链接问题上,我在这里就不介绍关于QT环境与mysql.sqlite3环境的安装步骤了,以下的所有的操作都是建立在你已经安装了所有环境的基础上的.好的,那我们就具体来看一看QT环境中怎 ...

  8. webstorm配置编译sass的输出目录

    关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很 ...

  9. Web性能优化工具WebPageTest（三）——本地部署（Windows 7版本）

    这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...

  10. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...