layUI layer.open弹出层增加修改按钮的样式

LayUI的学习与使用 专栏收录该内容
11 篇文章 0 订阅

方法一:全局修改应用样式(css中修改)

//全局修改 在css增加样式
//如果有四个按钮
//class:.layui-layer-btn .layui-layer-btn0
//.layui-layer-btn .layui-layer-btn1
//以此类推  或者去网页查看class名字
.layui-layer-btn .layui-layer-btn0{
//css样式 现在网页中调节好再copy过来
....
}
.layui-layer-btn .layui-layer-btn1{
}

方法二:局部修改应用样式(每次渲染css样式)

	//JS部分
	//渲染方法
   function addIconforBtn() {
	   debugger
	   var btn1= $(".layui-layer-btn .layui-layer-btn0");
	   var btn2  = $(".layui-layer-btn .layui-layer-btn1");
	   var btn3= $(".layui-layer-btn .layui-layer-btn2");
	   var btn4  = $(".layui-layer-btn .layui-layer-btn3");
	   btn1.css({   
		//css样式
      })
	  btn1.css({   
			//css样式
			//"属性名":"属性值",
			 "background-color":"#009688",	
			 	
	    })
      btn2.css({   
		//css样式
      })
      btn3.css({   
		//css样式
      })
      
  }       

//HTML部分

var index = layer.open({
    type: 2
    ,title: "弹出层标题"
    ,content: 'AlarmSafetyInfo.html'
    ,area: ['1100px', '600px']
    ,maxmin: true
    ,shade: 0
    ,btn: ['btn0','btn1','btn2','关闭']
    ,yes: function(index, layero){
        //按钮【按钮一】的回调
                }
    ,btn2: function(index, layero){
        //按钮【按钮二】的回调
    }
    ,btn3: function(index, layero){
        //按钮【按钮三】的回调
    }
    ,btn4: function(index, layero){
        //按钮【按钮四】的回调
    }

    ,success: function(layero, index){
        debugger
        //渲染按钮的样式
        addIconforBtn();
    }
})
  • 5
    点赞
  • 2
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页

打赏

每天get一点点

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值