修改layer中title样式

2024-07-04 09:18| 来源: 网络整理| 查看: 265

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效果不同

在这里插入图片描述分别点击A和B按钮时，我们发现标题都是同样的格式，

官方文档中提示

通过官方提供文档我们发现文档中这样一句话： “需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式”

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

解决后利用此原理我们可以在单页面通过该方法对不同弹框设定css样式修改后的效果，在这里插入图片描述

在这里插入图片描述

其他思路

如果弹出框使用iframe形式， 1.可以在success中的function内获取class然后修改对应的样式 2.在子层（弹出层）加载时触发父层css修改。

【本文地址】

公司简介

联系我们