弹出框插件layer使用

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

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3
 4     <head>
 5         <meta charset="UTF-8" />
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8         <title>弹出框插件layer使用</title>
 9     </head>
10
11     <body>
12         <div class="clearfix layer-area" id="chutiyan">
13             <a class="layui-btn layui-btn-primary" href="javascript:;">alert弹出框</a>
14             <a class="layui-btn layui-btn-primary" href="javascript:;">confirm弹出框</a>
15         </div>
16         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
17         <script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
18         <script type="text/javascript">
19             $('#chutiyan>a').on('click', function() {
20                 var othis = $(this),
21                     index = othis.index();
22                 switch(index) {
23                     case 0:
24                         layer.alert('弹出框内容', {
25                             icon: -1,
26                             shadeClose: true,
27                             title: '弹出框标题'
28                         });
29                         break;
30
31                     case 1:
32                         layer.confirm('您是如何看待前端开发？', {
33                             btn: ['重要', '奇葩'] //按钮
34                         }, function() {
35                             layer.msg('重要', {
36                                 icon: 1
37                             });
38                         }, function() {
39                             layer.msg('奇葩', {
40                                 icon: 1
41                             });
42                         });
43                         break;
44
45                     default:
46                         layer.msg('Hi!');
47                         break;
48                 }
49             });
50         </script>
51     </body>
52
53 </html>

效果：

（1）alert弹出框

（2）confirm弹出框

3、总结

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

弹出框插件layer使用相关推荐

messagrbox自定义按钮c语言,基于dialogbox修改可自定义按钮及事件的弹出框插件
插件描述:基于dialogbox1.0修改可自定义按钮及事件的弹出框插件,每个按钮可绑定单独的触发事件,并且能支持将弹出框作为一个表单来填入数据并获取 $('body').dialogbox({ ty ...
html登入弹框插件,基于jQuery的弹出框插件
html如下: $(function() { $("#btn01").popwin({ element: "#box01", title: "请填写以 ...
chosen(下拉列表带搜索插件)和layer(弹出框插件)在一起使用会有冲突，解决办法
可以选择用window.open()和chosen插件结合使用,这样就不会有冲突. chosen插件的使用: 1.先把js和css文件引用到网页里面去: <link href="js/ ...
关于layer弹出框出现layer is not underfined的问题
在使用layer弹框的时候,我下了两个版本的layer.一个是3.1.0一个是2.1.5.使用3.1.0直接引用layer.js和layer.css就可以实现弹窗,但是布局好像也有点问题.但是当我用2 ...
CSS3动画过渡的jquery动态弹出框插件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84111711 在线演示本地下载
一个 bootstrap 弹出框插件
http://bootstrap.ourjs.com/ 转载于:https://www.cnblogs.com/MDK-L/p/4428247.html
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...

弹出框插件layer使用

弹出框插件layer使用相关推荐

最新文章

热门文章