修改layer中title样式

最新推荐文章于 2022-09-07 11:41:53 发布

白白小甜鼠

最新推荐文章于 2022-09-07 11:41:53 发布

阅读量2.1w

点赞数 5

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/weixin_43103905/article/details/88663398

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

Layer title样式修改问题

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

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

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="./frontend_test/layui-v2.4.4/layui/layui.all.js"></script>
	<link rel="stylesheet" type="text/css" href="./frontend_test/layui-v2.4.4/layui/css/layui.css"  />
	<style type="text/css">
		.div-block {
			top:200px;
			left:200px;
			position: absolute;
		}

		.btn-style {
			width:150px;
		}
	</style>
</head>
<body>
	<div class="div-block">
		<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal btn-style" id="a">A</button>
		<button data-method="offset" data-type="auto" class="layui-btn layui-btn-danger btn-style" id="b">B</button>
	</div>
<script type="text/javascript">
	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:'<div style="height:100px;text-align-center;"><br><br><p>A按钮触发事件在此</p></div>'
			});
		});

		$("#b").click(function(){
			layer.open({
				type:1,
				title:['点击B按钮触发','color:#fff;background-color:#FF5722;'], // 这里修改title样式
				content:'<div style="height:100px;text-align-center;"><br><br><p>B按钮触发事件在此</p></div>'
			});
		});
	});
</script>
</body>
</html>

但是当一个页面中会有不同事件触发弹框效果想要显示的演示不同该如何如何处理并没有有效解决：
例如：我有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修改。

白白小甜鼠

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
修改layer中title样式

Layer title样式修改问题使用LayUI开发过程中，发现无法修改layer弹出框（本文中主要这针对layer.open打开的弹出框）标题样式，网上提供的方法中大多为自己设计并添加新的skin，或者在单个页面（弹框的父页面）中添加internal 或者external css去修改。先上源码，不同样式效果，节省时间。<!DOCTYPE html><html>...
复制链接

扫一扫