精华内容
下载资源
问答
  • layui关闭layer.open打开的页面

    千次阅读 2018-06-28 11:40:00
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引parent.layer.close(index);
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);
    展开全文
  • layui.layer弹层组件

    2020-10-23 17:47:28
    layui.layerlayui前端UI框架layer弹层组件layer使用方法layer方法使用layer.msg(content, options, end) - 提示框layer.load(icon, options) - 加载层layer.tips(content, follow, options) - tips层layer.alert...

    layui前端UI框架

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互。
    **兼容:**layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

    layer弹层组件

    layer 是作为 layui 的一个弹层模块.layer可以独立使用,也可以通过Layui模块化使用。

    layer使用方法

    1.作为独立组件使用
    需要下载layer组件包、引入jQuery1.8以上的任意版本,并引入layer.js.

     <script src="js/jquery2.1.4.js"></script>
     <script src="layer/layer.js"></script>
    // 引入好layer.js后,直接用即可
     <script>
     layer.msg('hello'); 
     </script>
    
    1. layui 模块化使用
      需要下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js
    layui.use('layer', function(){
      var layer = layui.layer;
      layer.msg('hello');
    });           
    

    layer方法使用

    layer.msg(content, options, end) - 提示框

    content:文本内容
    options:基础参数
    end:层销毁后触发的回调

    <script>
        function msgOne(){
           layer.msg("天干物燥,小心火烛",{icon:6});//icon:0-6
              }
    </script>
    <body>
        <button onclick="msgOne()">msg函数</button>
    </body>
    

    在这里插入图片描述

    layer.load(icon, options) - 加载层

    icon:图标。信息框和加载层的私有参数
    信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2

    <script>
    function onloadOne() {
                var index = layer.load(1); //icon数值在0-2
                setTimeout(function () {
                    layer.close(index);
                },2000);
            }
            function onloadTwo() {
              var indexOne = layer.load(2,{time: 8000});
              layer.close(indexOne);
            }
    </script>
    <body>
        <button onclick="onloadOne()">onload函数1</button>
        <button onclick="onloadTwo()">onload函数2</button>
    </body>
    

    在这里插入图片描述

    layer.tips(content, follow, options) - tips层

    follow:事件回调体(对象)

    <script>
          function tipOne() {
                layer.tips( "曹丕","#sq",{tipsMore:true,tips:3});
            }
    </script>
    <body>
       <button onclick="tipOne()">tip函数</button>
    </body>
    

    tips - tips方向和颜色:上右下左四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, ‘#c00’]
    tipsMore - 是否允许多个tips.允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

    在这里插入图片描述

    layer.alert(content, options, yes) - 普通信息框

    yes:确定按钮回调方法

    <script>
         function alertOne() {
                layer.alert("这就是嗨的代价",{icon: 6})
            }
    </script>
    <body>
       <button onclick="alertOne()">alert函数</button>
    </body>
    

    在这里插入图片描述

    layer.close(index) - 关闭特定层

    index:每一种弹层调用方式,都会返回一个index,它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的

     var indexOne = layer.load(2,{time: 8000});
              layer.close(indexOne);
    
    展开全文
  • 使用layuilayer独立组件实现父子页面传值。

    一、效果演示

    简单的layer父子页面传值实现,下面是演示效果。
    在这里插入图片描述

    二、layer的使用

    1.下载layer组件

    官网下载地址
    获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录。

    2.引入jQuery1.8以及layer.js

      <script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
      <script src="layer.js的路径"></script>
    

    3.layer基础参数

    下面是本次使用到的一些属性的介绍,如果想了解全部属性
    可以在layer官网进行学习:layer官方文档

    名称 类型/默认值 简介
    type - 基本层类型 类型:Number,默认:0 layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
    title - 标题 类型:String/Array/Boolean,默认:‘信息’ title支持三种类型的值,若传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若需要自定义标题区域样式,可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果不想显示标题栏,你可以title: false
    content - 内容 类型:String/DOM/Array,默认:’’ content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
    skin - 样式类名 类型:String,默认:’’ 可以传入layer内置的样式class名,还可以传入自定义的class名。目前layer内置的skin有:layui-layer-lanlayui-layer-molv
    area - 宽高 类型:String/Array,默认:‘auto’ 在默认状态下,layer是宽高都自适应的,可以只定义宽度area:‘500px’,高度仍然是自适应的。当宽高都要定义时area: [‘500px’, ‘300px’]
    maxmin - 最大最小化 类型:Boolean,默认:false 该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
    shadeClose - 是否点击遮罩关闭 类型:Boolean,默认:false 如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。

    三、父子页面传值实现

    1.思路

    1.打开子页面时,将父页面元素值赋给子页面对应元素
    2.子页面点击保存时,将子页面元素值赋给父页面对应元素

    2.代码

    1.父页面father.gtml

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父级页面</title>
    </head>
    <style>
        .center-in-center{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <body>
    <div class="center-in-center">
    <table>
        <tr>
            <td> num1:</td>
            <td> <input id="num1" value="1"></input></td>
        </tr>
        <tr>
            <td> num2:</td>
            <td> <input id="num2" value="2"></input></td>
        </tr>
        <tr>
            <td> num3:</td>
            <td> <input id="num3" value="3"></input></td>
        </tr>
    </table>
        <button type="button" id="openSon" >打开弹窗</button>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        $('#openSon').on('click', function(){
            layer.open({
                type: 2,
                title: '弹窗内容',
                skin: 'layui-layer-rim',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['300px' , '200px'],
                content: 'son.html',
            });
        });
    </script>
    </body>
    </html>
    

    2.子页面son.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子页面</title>
    </head>
    <body>
    <table>
        <tr>
            <td> num1:</td>
            <td> <input id="num1"></input></td>
        </tr>
        <tr>
            <td> num2:</td>
            <td> <input id="num2"></input></td>
        </tr>
        <tr>
            <td> num3:</td>
            <td> <input id="num3"></input></td>
        </tr>
    </table>
    <button>将值传给父页面并关闭弹窗</button>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
            //获取父页面的值
            var num1 = parent.$("#num1").val();
            var num2 = parent.$("#num2").val();
            var num3 = parent.$("#num3").val();
            //将获取到父页面的值赋给相应元素
            $("#num1").val(num1);
            $("#num2").val(num2);
            $("#num3").val(num3);
            
        $("button").click(function () {
            //获取页面元素的值
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var num3 = document.getElementById("num3").value;
            //将获取到的值赋给父页面相应元素
            $("#num1",window.parent.document).val(num1);
            $("#num2",window.parent.document).val(num2);
            $("#num3",window.parent.document).val(num3);
            //点击按钮的同时,关闭这个弹窗
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        })
    </script>
    </body>
    </html>
    
    展开全文
  • layui组件layer弹窗设置

    千次阅读 2019-08-28 16:47:58
    layui.use(['layer', 'form'], function(){ var layer = layui.layer,form = layui.form; layer.open({ id:'add',//设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式 ...
    layui.use(['layer', 'form'], function(){
    	var layer = layui.layer,form = layui.form;
    	layer.open({
    		id:'add',//设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
    		title:'标题',//设置弹出框上部标题
    		skin: 'none',//layui-layer-molv layui-layer-lan	layui-layer-rim
    		type: 2,//0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
    		content: 'http://www.baidu.com',//不想让iframe出现滚动条,可以content: ['http://sentsin.com', 'no']
    		area: ['500px', '300px'],//弹窗的长宽 默认auto时 maxWidth - 最大宽度 maxHeight - 最大高度
    		offset: 'auto',//默认坐标,即垂直水平居中 默认auto
    		shade:0.3,//遮罩层透明度 0-1 默认0.3
    		shadeClose:true,//是否点击遮罩层关闭弹窗 默认false
    		closeBtn:1, //右上角关闭按钮样式 一共两种分别为1 2 默认1
    		btn: ['bt1', 'bt2'], //按钮文字
    		btnAlign: 'r',//r按钮右对齐  l按钮左对齐 c按钮居中对齐  默认r
    		btn1: function(index, layero){
    			//按钮【bt1】的回调
    			alert(1);
    		}, 
    		btn2: function(index,layero){
    			//按钮【bt2】的回调
    			alert(2);
    			return false //开启该代码可禁止点击该按钮关闭
    		},
    		time: 0,//自动关闭时间 1000=1秒 默认0
    		anim:0,//弹出动画,目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。 默认0
    		maxmin:true,//该参数值对type:1和type:2有效。最大最小化按钮。 默认false
    		fixed:true,//即鼠标滚动时,层是否固定在可视区域  默认true
    		resize:true,//是否允许在弹层右下角拖动来拉伸尺寸  默认true
    		scrollbar:true,//是否允许浏览器出现滚动条  默认true
    		zIndex:19891014,//层叠顺序 默认:19891014(贤心生日 0.0)
    		success: function(layero, index){//层弹出后的成功回调方法
    			//console.log(layero, index);
    			alert('弹出成功');
    		},
    		yes: function(index,layero){//确定按钮回调方法
    			//do something
    			alert('确定按钮');//如果设定了yes回调,需进行手工关闭
    		},
    		cancel: function(index, layero){//右上角关闭按钮触发的回调,两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero)
    			if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
    				layer.close(index);
    			}
    			return false; 
    		} 
    
    	});
    })

    layui所有组件的官方文档网址https://www.layui.com/doc/modules/layer.html

    展开全文
  • layui弹窗layer具体使用

    2020-03-26 10:51:08
    layui弹窗layer具体使用open open 1.open弹窗打开默认全屏-------->full函数设置全屏 var index=layer.open({ type: 2, title: title, area: ['980px', '600px'], content: url }); layer.full(index); 2....
  • 关于layuilayer弹出层确认未关闭解决方法 layer.confirm(){ //添加 layer.close(index); //如图 }
  • 今天小编就为大家分享一篇在layuilayer弹出层点击事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layuilayer iframe禁止缩放拖拽

    千次阅读 2018-07-04 19:28:30
    弹层组件文档 - layui.layerlayer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者...
  • layuilayer的用法

    千次阅读 2019-08-08 23:19:31
    1.加载layui框架的项目包,一定要及得在文本就绪时间中初始化layui组件,否则可能导致多个组件无法使用。 https://www.layui.com/doc/modules/layer.html ...layui.use('layer', function(){ var la...
  • layui.layer 弹出层使用

    万次阅读 2018-03-18 20:55:16
    layerlayui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块1. 获取laery,你需要去官网下载laery.js 地址--http://layer.layui.com/ 2. 引入...
  • 今天小编就为大家分享一篇layui: layer.open加载窗体时出现遮罩层的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layuilayer弹出层右上角X关闭按钮样式修改 由于项目刚好用到layer弹出层,于是我使用了layer.open()做了一个页面层的弹出效果,但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式,于是对以下代码进行...
  • 点击上传按钮的时候,这个layer会自动关闭layui社区找到答案 form中添加button按钮,默认是submit类型,会自动提交表单的。 解决办法下面任选其一就行 1、可以用a标签替换button标签,class一样就可以了,这样...
  • 2017/10/16 弹层组件文档 - layui.layer

    千次阅读 2017-10-16 10:39:28
    H-ui.admin.js的弹层组件文档 - layui.layer layer_show(); layer.open();
  • 今天用Layui做了个详情页,点了关闭按钮却怎么也没有反应,发现原来我一直是在对父页面进行关闭,得先获取到弹出的子页面的索引,再根据这个索引对子页面进行关闭。 var index = parent.layer.getFrameIndex(window....
  • layuilayer弹出层

    2021-03-12 12:01:03
    layuilayer弹出层请求给一个隐藏div里面的空table表格添加内容,然后弹出层关闭后,请求结束,表格就出现在主页面上了。 layer.open({ type: 1, title:"采购单详情", area: ['700px', '450px'], fixed: false, /...
  • layui插件layer使用记录

    2018-05-31 10:40:37
    layer简介 ...[layer](layer.layui.com)是layui的一个独立插件,可以非常简单的完成漂亮简单的弹出框; layer的使用方法 layer.open({ }); layer.open()是layer的最核心的方法,其他还有layer.ale...
  • 美化layuilayer弹框

    2020-08-14 16:47:31
    由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。1 作为独立组件使用。如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上...
  • function close(status){ if(status=="yes"){ window.parent.location.reload();//刷新父页面 var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.lay...
  • layuilayer弹出层和form表单

    万次阅读 多人点赞 2019-06-27 22:33:12
    文章目录弹出层layerform表单增删改查所有代码 如果想用layui来完成增删改查,那么要会用弹出层和form表单这两个组件是必须的,所以今天就来介绍一些如何用layui完成基本的增删改查 弹出层layer 因为layui的特性,...
  • 给出友好提示,比如:代码实现:弹出层申请提现$('#pro').on('click',function(){//提现弹窗之前进行一定判断伪代码//上述条件符合之后,弹出提现弹窗layui.use('layer', function() {var layer = layui.layer;...
  • 弹层组件文档 - layui.layer layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web ...
  • 最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操作体验大家都知道,就是关闭弹出层,需要刷新父页面。开始写的时候,我陷入了自己的误区,在弹出层处理成功之后,我调用的是...
  • 使用layui.layer打开一个iframe页面,如果想在子页面修改父标题的内容也就是 layer.open({title:"123"});title字段时,我们就需要拿到父级layer的索引 var var index = parent.layer.getFrameIndex(window.name); 将...
  • 一款好用的vue弹窗组件,layui-layer弹窗风格 vl-layer github地址 更新信息 2021.01.20 更新: 新增offset的几个固定位置:右上"rightTop"、右下"rightBottom"、左上"leftTop"、左下"leftBottom" 2021.01.22 更新...
  • layui&layer 常用操作

    2020-01-14 17:27:27
    layui.use(['table'], function () { var table = layui.table; var admin = layui.admin; table.render({ elem: '#order_data' , url: "{:url('rateData')}" , size: 'lg' , cols: [[ { type: ...
  • layer弹出层关闭时控制层报错:Uncaught Error: Syntax error, unrecognized expression: #layui-layer 查看控制台最底部: 随后点击查看源代码(引用了一些文件以后,编辑器中的行数可能与源代码的不能对应...
  • layuilayer弹出层内置方法

    千次阅读 2019-08-15 14:42:36
    文章目录基础参数layer.config(options) - 初始化全局配置layer.ready(callback) - 初始化就绪layer.open(options) - 原始核心方法layer.alert(content, options, yes) - 普通信息框layer.confirm(content, options,...

空空如也

空空如也

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

layui关闭layer