css修改layui的下拉框样式 js_修改layer中title样式

Layer title样式修改问题

使用LayUI开发过程中,发现无法修改layer弹出框(本文中主要这针对layer.open打开的弹出框)标题样式,网上提供的方法中大多为自己设计并添加新的skin,或者在单个页面(弹框的父页面)中添加internal 或者external css去修改。

先上源码,不同样式效果,节省时间。

.div-block {

top:200px;

left:200px;

position: absolute;

}

.btn-style {

width:150px;

}

A

B

layui.use('layer', function(){

var $ = layui.jquery, layer = layui.layer;

$("#a").click(function(){

layer.open({

type:1,

title:['点击A按钮触发','color:#fff;background-color:#01AAED;'], // 在这里修改的title样式

content:'

A按钮触发事件在此'

});

});

$("#b").click(function(){

layer.open({

type:1,

title:['点击B按钮触发','color:#fff;background-color:#FF5722;'], // 这里修改title样式

content:'

B按钮触发事件在此'

});

});

});

但是当一个页面中会有不同事件触发弹框效果想要显示的演示不同该如何如何处理并没有有效解决:

例如:我有A、B两个弹框但是想要title效果不同

e43775815209767154ab02c6a8ab5e6d.png

分别点击A和B按钮时,

6e8f68ca09a83b500a7c02c2484b99ca.png

50d7799c08d8cc5ae083e79d230cda6d.png

我们发现标题都是同样的格式,

官方文档中提示

通过官方提供文档我们发现文档中这样一句话:

“需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式”

也就是title中采用array方式书写有两部分,第一部分为文本,第二部分为css样式,且多个样式可以通过;隔开。该部分的css样式相当于修改了.layui-layer-title这个class的样式表。

解决后

利用此原理我们可以在单页面通过该方法对不同弹框设定css样式

修改后的效果,

854fcbfad16af1bcd87aabf9819409f0.png

ff66a8db33d2d1e0f405a8f41317df1a.png

其他思路

如果弹出框使用iframe形式,

1.可以在success中的function内获取class然后修改对应的样式

2.在子层(弹出层)加载时触发父层css修改。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值