精华内容
下载资源
问答
  • 本文实例讲述了layer弹窗插件操作方法。分享给大家供大家参考,具体如下: 1、首先去http://layer.layui.com/下载插件 2、在网站上有演示说明 3、操作方法如何 [removed][removed] [removed] function openadd() { ...
  • layer弹窗插件.js

    2013-08-14 17:21:24
    layer是一个不错的弹窗插件,其脚本封装习惯非常好,值得学习。
  • layer弹窗js插件

    2019-04-25 17:25:17
    她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被8879682人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量...
  • 今天小编就为大家分享一篇对django layer弹窗组件的使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • jquery+layer弹窗插件

    2013-07-26 09:44:58
    jquery+layer弹窗插件 无兼容性问题
  • 在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断。 直接就可以用链接+参数的方式即可。 1、JS代码 var userGrade=Mrant layer.open({ title: '权限管理', area: ['800px', '500px'], shade: [0.3, '#...

    在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断。
    直接就可以用链接+参数的方式即可。

    1、JS代码

    var userGrade=Mrant
    layer.open({
    title: '权限管理',
    area: ['800px', '500px'],
    shade: [0.3, '#393D49'],
    content: "test.html?grade="+userGrade,
    yes: function(index) {   }
        });

    然后在test.html的js里边就能拿到带过来的参数。

    有个取链接里边参数的方法,我一直正在用的。当然百度上一大堆。

    2、取链接里边参数

    function RequestParameter(){
    var url = window.location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
        }
    }
    return theRequest}

    3、使用

    var getGrade=RequestParameter()["userGrade"];
    console.log(getGrade)//Mrant

    另一种简单的layer弹出窗传值问题!

    $.ajax({
         type:'get',
         url:'http://localhost:3000/books/book/'+id,
         data:{},
         dataType:'json',
         success:function(result){
         window.data=result
          layer.open({
             type: 2,
             data:1111,
             content: 'editBook.html',
             area: ['320px', '195px'],
                      maxmin: false
              })
          }
    
    })

    上边是父页面

    下面是子页面

    var data = parent.data;
     console.log(data)

    不用url传参就这么简单。

    参考自:必学智库

    展开全文
  • layer弹窗插件官网

    2019-10-08 16:47:57
    http://layer.layui.com/?alone 转载于:https://www.cnblogs.com/Allen-Wei/p/9006933.html

    http://layer.layui.com/?alone

    转载于:https://www.cnblogs.com/Allen-Wei/p/9006933.html

    展开全文
  • Layer 弹窗入门

    千人学习 2019-05-28 18:42:10
    Layer弹窗,《Layer弹窗 基础参数 入门》 通过24个小视频,系统的对Layer34个基础参数,全部逐一进行了视频讲解。继续和大家一起学习进步,内容较为浅显易懂,适合新手上手。 课程首先通过快速上手基本了解layer弹窗...
  • jquery-layer弹窗插件

    2016-06-22 16:09:00
    /* 先去官网下载最新的js...②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click',function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码:...
    1. /* 
    2. 先去官网下载最新的js  http://sentsin.com/jquery/layer/ 
    3. ①引用jquery 
    4. ②引用layer.min.js 
    5. */  
    6.   
    7. 触发弹层的事件可自由绑定,如:  
    8. $('#id').on('click', function(){  
    9.     layer.msg('test');  
    10. });  
    11. 下面主要贴出上述例子的调用代码:  
    12. 【信息框】:  
    13. layer.alert('白菜级别前端攻城师贤心', 8); //风格一  
    14. layer.msg('前端攻城师贤心'); //风格二  
    15. //当然,远远不止这两种风格。  
    16.   
    17. 【询问框】:  
    18. $.layer({  
    19.     shade: [0],  
    20.     area: ['auto','auto'],  
    21.     dialog: {  
    22.         msg: '您是如何看待前端开发?',  
    23.         btns: 2,                      
    24.         type: 4,  
    25.         btn: ['重要','奇葩'],  
    26.         yes: function(){  
    27.             layer.msg('重要', 1, 1);  
    28.         }, no: function(){  
    29.             layer.msg('奇葩', 1, 13);  
    30.         }  
    31.     }  
    32. });  
    33. //还可用layer.confirm()快捷调用  
    34.   
    35. 【页面层一】  
    36. $.layer({  
    37.     type: 1,  
    38.     shade: [0],  
    39.     area: ['auto', 'auto'],  
    40.     title: false,  
    41.     border: [0],  
    42.     page: {dom : '.layer_notice'}  
    43. });  
    44.   
    45. 【页面层二】  
    46. var pageii = $.layer({  
    47.     type: 1,  
    48.     title: false,  
    49.     area: ['auto', 'auto'],  
    50.     border: [0], //去掉默认边框  
    51.     shade: [0], //去掉遮罩  
    52.     closeBtn: [0, false], //去掉默认关闭按钮  
    53.     shift: 'left', //从左动画弹出  
    54.     page: {  
    55.         html: '<div ><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" οnclick="">关闭</button></div>'  
    56.     }  
    57. });  
    58. //自设关闭  
    59. $('#pagebtn').on('click', function(){  
    60.     layer.close(pageii);  
    61. });  
    62.   
    63. 【iframe层一】  
    64. $.layer({  
    65.     type: 2,  
    66.     shadeClose: true,  
    67.     title: false,  
    68.     closeBtn: [0, false],  
    69.     shade: [0.8, '#000'],  
    70.     border: [0],  
    71.     offset: ['20px',''],  
    72.     area: ['1000px', ($(window).height() - 50) +'px'],  
    73.     iframe: {src: 'http://f2e.sentsin.com/chat'}  
    74. });   
    75.   
    76. 【iframe层二】  
    77. layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, {  
    78.     time: 5,  
    79.     maxWidth: 260  
    80. });  
    81. $.layer({  
    82.     type: 2,  
    83.     closeBtn: false,  
    84.     shadeClose: true,  
    85.     shade: [0.1, '#fff'],  
    86.     border: [0],  
    87.     time: 5,  
    88.     iframe: {  
    89.         src: 'test/guodu.html'  
    90.     },  
    91.     title: false,  
    92.     area: ['300px','250px'],  
    93.     shift: 'right-bottom',  
    94.     end: function(){  
    95.         $.layer({  
    96.             type : 2,  
    97.             title: '贤心博客 - sentsin.com',  
    98.             shadeClose: true,  
    99.             maxmin: true,  
    100.             fix : false,    
    101.             area: ['1024px', 500],                       
    102.             iframe: {  
    103.                 src : 'http://sentsin.com/'  
    104.             }   
    105.         });  
    106.     }  
    107. });  
    108.   
    109. 【加载层一】  
    110. layer.load(3);  
    111.   
    112. 【加载层二】  
    113. layer.load('加载带文字', 3);  
    114.   
    115. 【tips层一】  
    116. layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {  
    117.     style: ['background-color:#78BA32; color:#fff', '#78BA32'],  
    118.     maxWidth:185,  
    119.     time: 3,  
    120.     closeBtn:[0, true]  
    121. });  
    122.   
    123. 【tips层二】  
    124. layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});  
    125.   
    126. 【输入/文件层】  
    127. //普通文本  
    128. layer.prompt({title: '您的名字?'}, function(name){  
    129.     alert(name);  
    130. });  
    131. //密码文本  
    132. layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){  
    133.     alert(pass);  
    134. });  
    135. //文件上传  
    136. layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){  
    137.     alert(file);  
    138. });  
    139. //多行文本  
    140. layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){  
    141.     alert(val);  
    142. });  
    143.   
    144. 【tab层】  
    145. layer.tab({  
    146.     area: ['1000px', '500px'],  
    147.     data: [  
    148.         {title: 'Say', content:'Hi,Main'},  
    149.         {title: '无题', content:'支持html传入'}                      
    150.     ]  
    151. });  
    152.   
    153. 【相册层】  
    154. //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json  
    155. var conf = {};  
    156. $.getJSON('ajax地址', {}, function(json){  
    157.     conf.photoJSON = json; //保存json,以便下次直接读取内存数据  
    158.     layer.photos({  
    159.         html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭',  
    160.         json: json  
    161.     });  
    162. }); 

    转载于:https://www.cnblogs.com/liufx/p/5607521.html

    展开全文
  • 主要介绍了小巧强大的jquery layer弹窗弹层插件的使用方法以及使用范围,非常详细,有需要的小伙伴可以参考下。
  • 利用layer弹窗插件,实现图片放大缩小功能!jquery图片放大缩小以下是以前用到的源码,分享出来让大家参考一下!这个兼容性挺好的,用起来简单。HTML核心部分:小川2016-10-2410:22:52小川2016-10-2410:22:52JS核心...

    利用layer弹窗插件,实现图片放大缩小功能!jquery图片放大缩小

    以下是以前用到的源码,分享出来让大家参考一下!

    这个兼容性挺好的,用起来简单。

    HTML核心部分:

     

    小川

    2016-10-24 10:22:52

     

    小川

    2016-10-24 10:22:52

    JS核心部分:

    function bigIma(id){

    var imgUrl = $("#itemLi_"+id).attr('data-src');

    window.img_width = 355;

    var html  = "

    ";

    html += "

    ";

    html += "  

    html += "        οnclick='window.img_width 

    html += "  $(\".img_url_class\").css({width: window.img_width});'>";

    html += "  放大";

    html += "  

        ";

    html += "  

    html += "  οnclick='window.img_width > 100 ? window.img_width -= 100 : 0;";

    html += "  $(\".img_url_class\").css({width: window.img_width})' >";

    html += "  缩小";

    html += "  

    ";

    html += "

    ";

    html += "

    ";

    html += "
    ";

    html += "

    ";

       html += "";

    html += "

    ";

    //页面层

    layer.open({

    title:'原始图预览',

    type: 1,

    //skin: 'layui-layer-rim', //加上边框

    area: ['355px', '615px'], //宽高

    content: html

    });

    }

    浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!

    郑重声明:

    1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除

    2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持

    3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。

    4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意

    展开全文
  • 仿百度登陆效果-layer弹窗插件

    千次阅读 2016-07-18 12:01:27
    layer.layui.com  layer弹窗插件,可以使用各种弹窗效果   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt...
  • layer弹窗插件comfirm()的坑

    万次阅读 2016-07-01 15:47:24
    layer弹窗插件官方API并没有给出图标和按钮同时改变的写法,今天我硬是给试出来了,我自己都怕自己。 代码如下: layer.confirm('进行实名认证',{icon:3,btn:['实名认证并购买','跳过实名认证']},function(index){...
  • 复制可下载源代码和自写教程 链接: https://pan.baidu.com/s/1mhHa5Os 密码: j5su 转载于:https://www.cnblogs.com/zc290987034/p/7291171.html
  • jquery.layerModel 弹窗插件
  • 1、安装vue-layer插件 npm install vue-layer --save-dev 2、打包入口文件main.js中引入vue、vue-layer、并且将vue-layer添加到vue原型 import Vue from 'vue'; import layer from 'vue-layer' Vue....
  • function msgShow(getname,getuserid){ ... layer.open({ type: 1 //此处以iframe举例 ,title: '收件人:'+getname+'(ID:'+getuserid+')' //弹窗的标题部分(按照需求,传入参数并显示) ,area: ['490px',...
  • 如何使用layer弹窗

    万次阅读 2018-07-09 22:59:12
    在平时的项目中,很多时候页面中难免会用到弹窗的情况,这里介绍将layer作为独立插件使用的方法。步骤一:去 layer 独立版本官网下载组件包。步骤二:获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分...
  • 插件描述:原生JS编写的弹窗控件ModalLayer,使用了ES6的一些新特性.更新时间:2020-01-07 00:27:13简介由原生JS编写的一套弹窗控件, 写的可能不是很好, 可能会尝试一些之前没用使用过的技术(小白鼠?), 会尽力完善的...
  • 第一节:layer.alert()弹窗的用法 1、解压layer-v2.2.zip压缩包 2、拷贝layer文件夹到实战项目目录 3、注意:layer.js是依赖jquery的,所以需要写上以下两行代码  &lt;script type="text/javascript&...
  • layer 超炫的弹窗插件

    2017-09-24 17:38:29
    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。 国人开发,界面友好,风格美丽,附有官方演示及讲解地址,欢迎大家...
  • layer弹窗上传文件,loading

    千次阅读 2019-01-04 10:40:40
    var layer = layui.layer, $ = layui.jquery, form = layui.form; //提交监听事件 form.on('submit(save)', function (data) { console.log(data); params = data.field; console.log(params.date); //...
  • layer.alert('请选择支付方式!', { anim: -1, skin: 'demo-class',//layer自定义的class offset: ['200px', ''] }) 如上面的代码协商skin,然后就可以修改样式了 body .demo-class .layui-layer-btn0 { ...
  • web弹窗插件 layer-v3.1.1

    2018-12-21 14:47:28
    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验
  • django layer弹窗组件使用

    千次阅读 2018-11-17 15:21:53
    layer.msg('保存成功!',{ icon: 1, time: 2000 //2秒关闭(如果不配置,默认是3秒) },function(){ history.go(0); }); } else if ( handle_status == '2' ) { layer.msg('修改失败!',{ icon: 2, time: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,627
精华内容 650
关键字:

layer弹窗插件