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

    2019-10-04 11:51:30
    http://layer.layui.com/mobile/ 转载于:https://www.cnblogs.com/tiancai/p/7094313.html

    http://layer.layui.com/mobile/

    转载于:https://www.cnblogs.com/tiancai/p/7094313.html

    展开全文
  • 左部可以伸缩的导航菜单, 右部动态传入的内容,采用layui,自定义layer弹框的样式,对使用layer弹框组件有了新的认识,温故而知新
  • layer弹框内部自定义按钮关闭弹框(实现简单的登录条款) 你好! 这是你第人生的转折点,你已经将layer弹框收入囊下 这个链接是layer弹框开发使用文档 链接: https://layer.layui.com/ 或者你打开Layui开发使用文档...

    layer弹框内部自定义按钮关闭弹框(实现简单的登录条款)

    你好! 这是你第人生的转折点,你已经将layer弹框收入囊下

    这个链接是layer弹框开发使用文档

    链接: https://layer.layui.com/
    或者你打开Layui开发使用文档在里面找弹出层是一样的

    页面功能展示:

    1.点击登录条款弹出弹出层

     /*
        点击专业医学用户登录条款
        */
        $("#clause").on("click",function () {
            //单个使用
            layer.open({
                skin: 'demo-class',//弹框样式
                title: false,//不显示标题
                btn: false,//不显示弹框按钮
                closeBtn: 0, //不显示关闭按钮
                resize: false,//不允许拉伸
                area:["90%","90%"],//宽高比例
                content: $('#detail').html(),//内容
            });
    
        })
    

    当然还有很多layer自带的属性文档里面很多默认的我就不在这里一一展示了

    2.弹出层页面内容编写

     <!--HTML部分-->
        <script type="text/html" id="detail">
            <div role="edit" tabindex="-1">
                <div>
                    <h3> <b><label style="color: yellow">*请仔细阅读下面的协议,只有接受协议方可继续进行登录。</label></b></h3>
                    <hr style="height:1px;border:none;border-top:3px solid red;" />
                    <span style="font-size: 16px;">
                    <p>1.服务条款的确认******************************************************************达成协议并接受所有的服务条款。<label style="color: yellow">本人理解本次务中所含有的信息是提******************************************************</label></p>
                    <p>2***************************************************************************************************************************************************</p>
                	</span>
                </div>
                <div style="text-align: center">
                    <button type="button" onclick="clickme();" class="layui-btn" style="background: #433B72;border-color: #1E9FFF;margin-top: 30px;width: 60%;border-radius: 8px">确定</button>
                </div>
            </div>
        </script>
    

    这里是用id获取html的方法当然还有很多方法根据需求实现即可

    弹出层内容功能显示:

    弹出层的宽高比例可以根据条款内容的多少来更改

    3.需要用户浏览全部的条款内容才可以退出最简单的方法在内容的最下面加一个按钮就可以了

    弹出层内部按钮页面显示:

      function clickme(){
            layer.closeAll(); //疯狂模式,关闭所有层
        }
    

    4.根据需求样式的修改参照即可

     body .demo-class {
                background-color: #4d5d9b;
                color: white;
            }
    

    #完工撒花

    展开全文
  • 主要介绍了vue项目中使用vue-layer弹框插件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一、点击layer弹框自带的btns关闭 top.layer.open({ type:2, title:'title', area:['500px','350px'], content:'url', btns:['确定','取消'], yes:function(index,layero){ // index:当前弹框索引;layero...

    一、点击layer弹框自带的btns关闭

    top.layer.open({
    	type:2,
    	title:'title',
    	area:['500px','350px'],
    	content:'url',
    	btns:['确定','取消'],
    	yes:function(index,layero){
    		// index:当前弹框索引;layero:当前弹框
    		top.layer.close(index); // 关闭弹框
    		console.log(layui.jquery(layero).find("iframe")[0].contentWindow.abc) // 直接取弹框里abc的值
    	}
    })
    

    二、自定义弹框里按钮

    // 父页面
    top.layer.open({
    	type:2,
    	title:'title',
    	area:['500px','350px'],
    	content:'url',
    })
    // 弹框页面
    $(".btns").click(function(){
    	parent.layer.close(parent.layer.getFrameIndex(window.name));  // 关闭当前弹框
    })
    
    展开全文
  • layer弹框倒计时结束后执行 var i = 10; var interval; layer.confirm('会议已结束',{ btn: ['取消'],//按钮 skin: 'layui-layer-molv',success: function(a,b){ var fn = function() { layer.title(i+' 秒...

    layer弹框倒计时结束后执行

     var i = 10;
            var interval;
            layer.confirm('会议已结束',{
              btn: ['取消'],//按钮
              skin: 'layui-layer-molv',success: function(a,b){  
                var fn = function() {         
                 layer.title(i+' 秒后,系统将自动退出并关闭。',b);      
                  i--;
                };
                interval = setInterval(function(){
                    fn();
                    if(i === 0){// 倒计时结束后执行             
                      layer.title('',b);
                      clearInterval(interval);
                      layer.msg('倒计时结束',{icon: 1});
                    }
                  },1000);
              },end:function(){
                clearInterval(interval);
              }
              },function(){
                clearInterval(interval);
                layer.msg('已取消',{icon: 1});
              });

    展开全文
  • 在ztree里面,删除一个节点的时候,会弹出一个弹框询问,是否删除,本来用的是网页自带的confirm弹框,根据公司的业务需求,要用到layer弹框删除,这个时候,就出现了一个问题。 问题:触发删除事件之后,弹出layer...
  • 关于layer弹框不居中的问题 #最近在写一个购物车页面,在用户点击删除商品按钮的时候,为了让用户进行再确认是否删除,需要用到layer.confirm弹框,但是弹框一直不显示,只出现一个遮罩层,后来调试好久,弹框终于...
  • success时候调用 “blurLayBtn” //layer 取消按钮自动聚焦 function blurLayBtn(layObj) { //layObj 是当前layer弹框对象 $(layObj).find('.layui-layer-btn button').blur(); }
  • vue-layer弹框插件安装npm i --save vue-layer引用import layer from 'vue-layer'Vue.prototype.$layer = layer(Vue);参数说明{type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)title: '信息',...
  • layer弹框用法

    2021-01-28 09:49:43
    //提示框弹框有暗色背景 layer.msg(ret.data, { icon: 1,//1弹框为对勾图标 0为警告图标 shade: [0.3, '#393D49'], shadeClose: true }); //无暗色背景,提示信息后三秒后刷新 layer.msg(ret.data, { icon: 1, ...
  • vue项目中使用vue-layer弹框插件

    千次阅读 2019-09-29 19:12:13
    vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3...
  • 在打开layer弹框的时候,如果遇到网络较慢,会有一个加载的过程,默认为白色,如果项目的整体基调为其他的颜色的时候,会显得比较突兀,这个时候,需要找到layer.css源码中的这部分代码,加以修改。 .layui-layer-...
  • layer弹框右上角关闭按钮的样式

    千次阅读 2019-09-02 11:37:46
    打开layer右上角的叉号的审查元素,可以看到运用的是CSS 图像精灵(css sprites...需要用到其中之一的叉号按钮,来改变layer弹框右上角关闭按钮的样式,只需要在源代码里面修改一下: 需要打开插件css源代码layer.cs...
  • 关闭layer弹框

    2019-10-23 14:06:42
    友好的关闭父层弹框 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 刷新页面 window.parent.location.reload();
  • vue安装使用vue-layer弹框插件步骤 (1)安装vue-layer npm install --save vue-layer (2)在【src】目录下的【main.js】中引入vue-layer import layer from "vue-layer"; import "vue-layer/lib/vue-layer.css";...
  • vue项目中整合bootstrap、layer弹框、axios跨域请求 1、初始化vue项目 vue init webpack vue_layer 2、安装jquery依赖 cnpm install jquery@3.2.1 --save 3、安装axios和qs依赖 cnpm install axios --save cnpm ...
  • layer弹框关闭

    2019-09-17 15:29:26
    (1)关闭特定iframe ...varindex = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引 parent.layer.close(index);//再执行关闭 或 parent.layer.closeAll('iframe'); ...
  • 使用layer弹框

    2019-03-27 10:55:03
    1.下载layer放到项目内(theme文件夹应该是layer需要用到的资源文件,需要和layer.js放到同一目录下) 2.项目引用,需要引用jQuery.js 3.点击事件,利用layer.open()方法弹出界面 //弹出一个iframe层 $('#...
  • layui 在layer弹框中渲染数据表格,表头对不齐问题 此问题在type为1的页面层常见 解决方案: 在弹窗成功的回调中渲染表格 layer.open({  type: 1,  content: $("#id"), //弹框中的dom元素  area: ['250px','100...
  • layui layer 弹框

    2019-05-02 16:59:00
    layer这个是一个web弹层组件,挺好用的...然后项目框架是SSM...  layer.open主要是用来弹出来一个iframe弹窗,然后用来展示数据也行,用来修改也行,这次记录的主要是展示,展示我想要展示的数据,我需要的...
  • 使用layer弹框入门

    2018-04-14 20:53:06
    使用layer组件可以很方便地开发出完美的弹框,使用步骤:第一步,在html文件中引入jquery和layer(layui这个前端框架依赖jquery)&lt;script type="text/javascript" src="js/jquery-3.2.1.js&...
  • layer 弹框不显示内容

    2018-12-26 16:41:00
    // layer弹框不显示信息 可能是背景颜色和字体颜色冲突 改下字体颜色即可 layer.msg('<p style="color:black">用户名不能为空</p>', {icon: 2,time: 1000}); 转载于:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 583
精华内容 233
关键字:

layer弹框