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. css中auto的用法

    —什么是auto? +auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算. +块级元素中margin.border.padding以及content宽度之和构成父元素widt ...

  2. Caffe学习系列（四）之--训练自己的模型

    前言: 本文章记录了我将自己的数据集处理并训练的流程,帮助一些刚入门的学习者,也记录自己的成长,万事起于忽微,量变引起质变. 正文: 一.流程 1)准备数据集  2)数据转换为lmdb格式  3)计算 ...

  3. XtraBackup 原理与安装

    简介 XtraBackup(PXB) 工具是 Percona 公司用 perl 语言开发的一个用于 MySQL 数据库物理热备的备份工具,支持 MySQl(Oracle).Percona Server ...

  4. linux基础 作业篇

    1.自动部署反向代理 web nfs #!/usr/bin/python #-*- coding:utf-8 -*- #开发脚本自动部署及监控 #1.编写脚本自动部署反向代理.web.nfs: #!/ ...

  5. VueJS实现一个货币结算自定义控件

    Vue.component('currency-input', { template: '\ <div>\ <label v-if="label">{{ l ...

  6. web安全色

    web安全色产生的原因 不同的平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别 ...

  7. logback配置文件详解

    一:根节点<configuration>包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文 ...

  8. openlayers应用“三”：百度地图纠偏

    前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图,页面上能够正常显示.地图加载后在地图上显示一条GPS轨迹,发现离实际位置相差太远,如下图所示: 轨迹形状和实际形状相同,但是位移太远, ...

  9. DDD理论学习系列（1）-- 通用语言

    1.引言 在开始之前,我想我们有必要先了解以下DDD的主要参与者.因为毕竟语言是人说的吗,就像我们面向对象编程一样,那通用语言面向的是? DDD的主要参与者:领域专家+开发人员 领域专家:精通业务的任 ...

  10. JavaScript利用闭包循环绑定事件

    我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...