精华内容
下载资源
问答
  • layer弹窗

    2020-02-11 21:38:12
    layer弹窗layer弹窗layer.msglayer.open基础参数type,设置弹框类型title,设置弹框标题content,设置弹框内容skin,设置弹框样式area,设置弹框大小offset,设置弹框的位置icon,设置信息提示框图标btn,按钮...

    layer弹窗

    jquery.js下载地址
    layer.js下载地址
    layer插件的结构:
    在这里插入图片描述
    根据test.xml文件的要求,将layer文件夹放到项目的根目录下,并在需要弹窗的页面引入layer.js,并引入1.8以上版本的jquery.js插件

    <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript" src="layer/layer.js" ></script>
    

    layer.msg

    	<script type="text/javascript">
    		layer.msg('hello',{
    			//大括号里面设置其属性
    			//弹窗显示时间,单位毫秒
    			time:3000
    		});
    	</script>
    

    layer.open

    	layer.open({
    		type:1,
    		content: '<font color="red">你好</font>'
    	});
    

    基础参数

    type,设置弹框类型

    type:Number,默认值0

    type含义
    0信息框 (默认值)
    1页面层
    2iframe层
    3加载层
    4tips层
    title,设置弹框标题

    title:String/Array/Boolean,默认值"信息"

    1. 传入String类型只会改变标题,例如:

      	title:'我是标题',
      
    2. 传入数组可以给标题定义样式,例如:

      	title:['我是标题','font-size:18px;'],
      
    3. 传入boolean可以不显示标题

      	title:false,
      
    content,设置弹框内容

    content:String/DOM/Array,默认:""

    type数据类型可以传入的内容
    1String任意文本或html
    DOM传入EL表达式
    2String传入一个页面的url
    Array传入一个数组,[url,'no'],弹窗可以不出现滚动条,默认是有滚动条的
    4Array['内容','#id']
    skin,设置弹框样式

    skin:String,默认:""
    skin是弹框的样式,可以传入字符串 class名

    area,设置弹框大小

    area:String/Array,默认:‘auto’
    例如:

    	area:['500px','500px'],
    
    offset,设置弹框的位置

    offset:String/Array,默认:垂直水平居中

    备注
    offset: ‘auto’默认坐标,即垂直水平居中
    offset: ‘100px’只定义top坐标,水平保持居中
    offset: [‘100px’, ‘50px’]同时定义top、left坐标
    offset: ‘t’快捷设置顶部坐标
    offset: ‘r’快捷设置右边缘坐标
    offset: ‘b’快捷设置底部坐标
    offset: ‘l’快捷设置左边缘坐标
    offset: ‘lt’快捷设置左上角
    offset: ‘lb’快捷设置左下角
    offset: ‘rt’快捷设置右上角
    offset: ‘rb’快捷设置右下角
    icon,设置信息提示框图标

    icon:Number,默认:-1
    icon取值:0-6,超出6为0,按照下图的图标按顺序对应
    在这里插入图片描述

    btn,按钮

    demo:

    	layer.open({
    		content:'test',
    		btn:['按钮一','按钮二','按钮三'],//可以有无数个按钮
    		btn1:function(index,layero){
    			//index:当前层的索引,layero:当前层的DOM对象
    			//按钮一的回调,点击按钮一默认不会关闭弹窗
    			layer.close(index);//设置按钮关闭弹窗
    		},
    		btn2:function(index,layero){
    			//按钮二的回调,点击按钮二及以后的按钮都默认关闭弹窗
    			return false;//开启按钮禁止关闭弹窗
    		},
    		btn3:function(index,layero){
    			//按钮三的回调,
    		},
    		cancel:function(index,layero){
    			//右上角关闭弹窗回调
    			return false;//关闭弹窗按钮可以设置禁止关闭弹窗
    		}
    	})
    
    btnAlign,设置按钮排列

    btnAlign:String,默认:“r”

    备注
    btnAlign: ‘l’按钮左对齐
    btnAlign: ‘c’按钮居中对齐
    btnAlign: ‘r’按钮右对齐。默认值,不用设置
    closeBtn,关闭按钮

    closeBtn:String/Boolean,默认:1
    layer提供了三种风格的关闭按钮,可通过配置0,1,2来展示,如果不显示,则closeBtn: false

    shade,遮住父页面样式设置

    shade:String/Boolean,默认:[0.3,’#000’]

    time,设置自动关闭弹窗所需的时间

    time:Number,默认:0,单位:毫秒

    anim,设置弹窗弹出动画

    anim:Number,默认:0,可取范围0-6,如果不想显示动画,设置为-1即可

    备注
    anim: 0平滑放大。默认
    anim: 1从上掉落
    anim: 2从最底部往上滑入
    anim: 3从左滑入
    anim: 4从左翻滚
    anim: 5渐显
    anim: 6抖动
    maxmin,最大最小化按钮显示

    maxmin:Boolean,默认:false,不显示按钮,该属性对 type1,type2有效

    fixed,窗口固定

    fixed:Boolean,默认:true,即固定后不随窗口的滚动而滚动

    resize,是否允许拉伸

    resize:Boolean,默认:true,该属性对loading、tips无效

    resizing,监听窗口拉伸,回调返回一个参数,当前层的DOM对象

    demo:

    	resizing: function(layero){
    		console.log(layero);
    	}   
    
    scrollbar,是否允许弹窗出现滚动条

    scrollbar:Boolean,默认true

    success,弹框成功回调
    layer.open({
    	content: '测试回调',
    	success: function(layero, index){
    		console.log(layero, index);
    	}
    }); 
    

    layer.alert

    	layer,alert('酷比了',{
    		icon:1
    	});
    
    展开全文
  • layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。
  • Layer 弹窗入门

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

    2021-03-22 19:50:07
    layer 是layui的一个弹出层组件,但是可以作为独立组件使用。单独使用去layer官网下载独立组件包,并且需引入jQuery1.8以上版本。 引入好layer.js后,直接用即可 <script src="layer.js"></script> <...

    简介

    layer 是layui的一个弹出层组件,但是可以作为独立组件使用。单独使用去layer官网下载独立组件包,并且需引入jQuery1.8以上版本。

    引入好layer.js后,直接用即可
    <script src="layer.js"></script>
    <script>
    layer.msg('hello'); 
    </script>
    

    基础参数

    • type:类型Number,0(信息框,默认),1(页面层),2(iframe层),3(加载层),4(tips层)

    • title:类型String/Array/Boolean,普通字符串改变文本,数组形式的第二个参数是css样式,布尔值是不显示标题

      title: '我是标题'
      title: ['文本', 'font-size:18px;']
      title: false
      
    • content:类型String/DOM/Array,content的内容需要根据type类型变化。

      /!* 如果是页面层 */
      layer.open({
        type: 1, 
        content: '传入任意的文本或html' //这里content是一个普通的String
      });
      layer.open({
        type: 1,
        content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
      });
      //Ajax获取
      $.post('url', {}, function(str){
        layer.open({
          type: 1,
          content: str //注意,如果str是object,那么需要字符拼接。
        });
      });
      
      /!* 如果是iframe层 */
      layer.open({
        type: 2, 
        content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
      });
      
      /!* 如果是用layer.open执行tips层 */
      layer.open({
        type: 4,
        content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
      });        
      
    • skin:类型String,不仅可以传入内置的样式class名,还可以传入自定的class,目前layer内置的skin有:layui-layer-lanlayui-layer-molv。

    • area:类型String/Array,默认情况下宽高是自适应的,想改变宽可以area: '500px',宽高都要时area: ['500px','300px']

    • offset:类型String/Array,默认垂直水平居中

      备注
      offset: ‘auto’默认坐标,即垂直水平居中
      offset: ‘100px’只定义top坐标,水平保持居中
      offset: [‘100px’, ‘50px’]同时定义top、left坐标
      offset: ‘t’快捷设置顶部坐标
    • icon:类型Number,信息框和加载层的私有参数。-1(信息框),0(加载层)。信息框有默认图标0-6,加载层有0-2。

    • bth:类型String/Array,默认’确认’。定义多个按钮可以btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,按钮2开始是btn2: function(){}

      //eg2
      layer.open({
        content: 'test'
        ,btn: ['按钮一', '按钮二', '按钮三']
        ,yes: function(index, layero){
          //按钮【按钮一】的回调
        }
        ,btn2: function(index, layero){
          //按钮【按钮二】的回调
          
          //return false 开启该代码可禁止点击该按钮关闭
        }
        ,btn3: function(index, layero){
          //按钮【按钮三】的回调
          
          //return false 开启该代码可禁止点击该按钮关闭
        }
        ,cancel: function(){ 
          //右上角关闭回调
          
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
      
    • btnAlign:类型String,按钮排列,默认右对齐。有’l’,‘c’,'r’三种,分别是左中右。

    • closeBtn:类型String/Boolean,右上角的关闭x按钮,有两种风格1和2,0是个奇怪的东西,可以用false表示不显示。

    • shade:类型String/Array/Boolean,默认0.3。即弹出层外的区域变暗,默认是0.3透明度的黑(’#000’),定义别的颜色可以shade: [0.8, '#393D49'],不显示遮罩可以shade: 0

    • shadeClose:类型Boolean,默认关闭。用于控制能否点击弹窗外关闭弹窗。

    • time:类型Number,默认0。自动关闭时间,单位毫秒(ms)。

    • id:类型String,设置该值后不管什么类型的弹窗都只允许弹出一个,常用于页面层和iframe层模式。

    • anim:类型Number,默认0。弹出动画,采用CSS3,有0-6七种模式,不想显示动画设置为-1。0就挺好的,别的适用于特殊场景。

    • isOutAnim:类型Boolean,默认true。关闭弹窗时的过度动画,可以设置false关闭。区别不是很大,本身动画就比较克制。

    • maxmin:类型Boolean,默认false。该参数仅对type: 1type: 2有效,添加最大最小化按钮。

    • fixed:类型Boolean,默认true。设定弹出窗口是否固定在屏幕中,不会随着滚轮移动。

    • resize:类型Boolean,默认true。是否允许通过右下角拉伸窗口。该参数对loading,tips层无效。

    • resizing:类型Function。监听窗口拉伸动作,当拉伸窗口时执行回调函数,函数参数是当前层的DOM对象

      resizing: function(layero){
        console.log(layero);
      }   
      
    • scrollBar:类型Boolean,默认true。是否允许背景窗口滚动。

    • maxWidth,maxHeight:类型Number。只有当area: 'auto'时才生效。

    • zIndex:层叠顺序,用于解决与其他组件的层叠冲突。

    • move:类型String/DOM/Boolean,默认’layui-layer-title’。触发拖拽的元素,可以用指定元素选择器或DOM,还可以配置false来禁止拖拽。

    • moveOut:类型Boolean,默认false。是否允许拖拽到窗口外。

    • moveEnd:类型Function。拖动完毕后的回调方法,使用同上面的resizing。

    • tips:类型Number/Array,默认2。tips层的私有方法,从元素的上右下左四个方向出现,还可以定制颜色tips: [1, '#c00']

    • tipsMore:类型Boolean,默认false。是否允许多个tips存在。

    • success:类型Function。在层创建完毕后的回调方法。携带参数分别是当前层DOM和当前层索引。

      layer.open({
        content: '测试回调',
        success: function(layero, index){
          console.log(layero, index);
        }
      });  
      
    • yes:类型Function。确定按钮的回调方法。携带参数分别是当前层索引和当前层DOM。

      layer.open({
        content: '测试回调',
        yes: function(index, layero){
          //do something
          layer.close(index); //如果设定了yes回调,需进行手工关闭
        }
      });   
      
    • cancel:类型Function。右上角关闭按钮的回调方法,携带参数分别是当前层索引和当前层DOM。

      cancel: function(index, layero){ 
        if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
          layer.close(index)
        }
        return false; 
      } 
      
    • end:类型Function。层销毁后的回调方法,不管是确定还是关闭都调用。不携带参数。

    • full,min,restore:类型Function。最大化、最小化、还原的回调方法。携带一个参数,当前层DOM。

    内置方法

    • layer.config(options):初始化全局配置。一个既可以重要也不重要的方法。平常不怎么用,但是很有用。

      layer.config({
        anim: 1, //默认动画风格
        skin: 'layui-layer-molv' //默认皮肤});
      
    • layer.ready(callback):在需要页面一打开就出现弹层时,最好将弹层放在ready方法里。毕竟加载总需要时间。

      //页面一打开就执行弹层
      layer.ready(function(){
        layer.msg('很高兴一开场就见到你');
      });      
      
    • layer.open(options):创建层的方法。options就是上面的基本参数。

    • layer.alert(content, options, yes):普通信息框。类似原生的弹窗,但是使用更加灵活,options就是基本参数。并且参数能够自动向左补齐(能跳过一些参数)。

      //eg1
      layer.alert('只想简单的提示');        
      //eg2
      layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
      //eg3
      layer.alert('有了回调', function(index){ //可以跳过第二个参数直接写回调函数
        //do something
        
        layer.close(index);
      });    
      
    • layer.confirm(content, options, yes, cancel):类似系统confirm但远胜confirm。需要把交互语句放在回调体里。同样是参数自动向左补齐。

      //eg2
      layer.confirm('is not?', function(index){
        //do something
        
        layer.close(index);
      });   
      
    • layer.msg(content, options, end):作者用心做的提示框。默认三秒后自动消失。参数自动补齐。

      layer.msg('同上', {
        icon: 1,
        time: 2000 //2秒关闭(如果不配置,默认是3秒)
      }, function(){
        //do something
      });
      
    • layer.load(icon, options):type:3的深度定制。load默认是不关闭的,因为一般在ajax回调体中关闭。

    • layer.tips(content, follow, options):type:4的深度定制。和msg一样低调,能够智能定位,知道该出现在哪里。默认是在元素右边弹出

      //eg 2
      $('#id').on('click', function(){
        var that = this;
        layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
      });
      //eg 3
      layer.tips('在上面', '#id', {
        tips: 1
      });
      
    • layer.close(index):关闭特定层。获取index的方式如下。

      //当你想关闭当前页的某个层时
      var index = layer.open();
      var index = layer.alert();
      var index = layer.load();
      var index = layer.tips();
      //正如你看到的,每一种弹层调用方式,都会返回一个index
      layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
       
      //如果你想关闭最新弹出的层,直接获取layer.index即可
      layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
       
      //当你在iframe页面关闭自身时
      var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
      parent.layer.close(index); //再执行关闭
      
    • layer.closeAll():简单粗暴,关闭所有层。可以通过指定类型关闭特定类型。

      layer.closeAll(); //疯狂模式,关闭所有层
      layer.closeAll('dialog'); //关闭信息框
      layer.closeAll('page'); //关闭所有页面层
      layer.closeAll('iframe'); //关闭所有的iframe层
      layer.closeAll('loading'); //关闭加载层
      layer.closeAll('tips'); //关闭所有的tips层   
      
    • layer.style(index, cssStyle):重新定义层的样式,对load层和tips层无效。

    • layer.title(title, index):更改层的标题。

    • layer.getChildFrame(selector, index):在当前页视图获取iframe页的DOM时使用。

    • layer.getFrameIndex(windowName):获取特定iframe层的索引,一般在iframe关闭自身时用到。

    • layer.iframeAuto(index):指定iframe层高度自适应。

    • layer.iframeSrc(index, url):重置特定iframe url。

    • layer.setTop(layero):在多个窗口打开时,通过点击窗体能置顶当前窗口。

    • layer.full()、layer.min()、layer.restore():在自定义元素上触发最大小化

    其他内置层

    • layer.prompt(options, yes): 输入层。参数自动向左补齐,yes方法携带参数value 表单值index 索引elem 表单元素
      //例子2
      layer.prompt({
        formType: 2,
        value: '初始值',
        title: '请输入值',
        area: ['800px', '350px'] //自定义文本域宽高
      }, function(value, index, elem){
        alert(value); //得到value
        layer.close(index);
      });
      
    • layer.tab(options):tab层。只定义了一个成员tab: [],呈现出一个多标签的弹窗。
      layer.tab({
        area: ['600px', '300px'],
        tab: [{
          title: 'TAB1', 
          content: '内容1'
        }, {
          title: 'TAB2', 
          content: '内容2'
        }, {
          title: 'TAB3', 
          content: '内容3'
        }]
      });        
      
    • layer.photos(options):相册层。支持传入json和直接读取页面图片两种方式。传入json需按照指定格式。photos还有个tab回调方法,切换图片时触发。
      //HTML示例
      <div id="layer-photos-demo" class="layer-photos-demo">
        <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
        <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
      </div>
       
      <script>
      //调用示例
      layer.photos({
        photos: '#layer-photos-demo'
        ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
        ,tab: function(pic, layero){
             console.log(pic) //当前图片的一些信息
           }
      }); 
      </script>
      
      
    展开全文
  • 主要介绍了layer弹窗插件操作方法,结合实例形式详细分析了layer弹窗插件的下载、调用、设置等具体步骤与操作技巧,需要的朋友可以参考下
  • Layer弹窗

    2017-09-21 14:27:27
    function add() { // iframe层 layer.open({ type : 2, title : '增加用户', maxmin : true, shadeClose : false, // 点击遮罩关闭层 area : [ '800px', '520px' ], con
    function add() {
        // iframe层
        layer.open({
            type : 2,
            title : '增加用户',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '520px' ],
            content : prefix + '/add' // iframe的url
        });
    }

    这里写图片描述

    展开全文
  • layer弹窗不居中解决方案,layer弹窗不显示   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&...

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,

    layer弹窗不居中解决方案,layer弹窗不显示

     

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    蕃薯耀 2016年12月9日 09:07:16 星期五

    http://fanshuyao.iteye.com/

     

    一、问题描述

    layer做操作结果提示时,发现如果页面超出屏幕的高度时,弹出的提示不是屏幕居中,而是在页面高度的中间,如果一个页面的高度比较大,就看不到提示了。

     

    还有一种情况是Layer弹出窗口只显示遮罩层,没有显示窗口(IFrame)

     

    二、解决方案

     

    解决方法一:

    当页面缺少下面这个声明时,在页面最上面加上声明就能解决问题。

    本人的页面就是少了这个,加上就正常。原因就是少了这个声明,导致解析页面时不正确。

     

    <!doctype html>

     

     

     

    科普:

    定义和用法

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

    <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

    HTML5 不基于 SGML,所以不需要引用 DTD。

    提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

     

     

    解决方法二:

     

    给Body增加一个样式,设置Body的高度为100%

     

    <body style="height:100%;">
    
    ......
    .......
    
    </body>

     

     

     

    建议使用第一种,因为比较标准。

     

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    蕃薯耀 2016年12月9日 09:07:16 星期五

    http://fanshuyao.iteye.com/

    展开全文
  • 最近做项目遇到这样的需求使用layer在弹窗内完成新增,成功后提示并刷新页面,下面小编给大家带来了使用layer弹窗和layui表单做新增功能,具体实现代码,参考下本
  • 主要介绍了小巧强大的jquery layer弹窗弹层插件的使用方法以及使用范围,非常详细,有需要的小伙伴可以参考下。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,331
精华内容 2,932
关键字:

layer弹窗