layer ui插件显示tips时,修改字体颜色的实现方法


Posted in Javascript onSeptember 11, 2019

今天做调查问卷,又遇到一个蛋疼小问题,记录下。

调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示。用的如下组件:http://layer.layui.com/

1、之前一直默认用的:

<script src="/assets/js/layer/layer.js"></script>
function showMessage(msg, domObj) {
 layer.tips(msg, domObj,{tips:3});//弹出框加回调函数
}
showMessage("选项不能为空", $(this));

效果如下:

layer ui插件显示tips时,修改字体颜色的实现方法

2、ui过来看了下之后,说太丑,要换成白色背景,红色字体

可是查看了半天的官方文档,只看到了修改背景颜色的配置项,没找到改字体色的配置项:

勉强修改背景色后如下:

function showMessage(msg, domObj) {
  layer.tips(msg, domObj,{tips:[3,"red"]});//弹出框加回调函数
 }

layer ui插件显示tips时,修改字体颜色的实现方法

3、最后实在无语,说搞不了,后边同事折腾了一会,过来提供了如下方案:

function showMessage(msg, domObj) {
  layer.tips("<span style='color:red'>"+msg+"</span>", domObj,{tips:[3,'#fff']});//弹出框加回调函数
 }

layer ui插件显示tips时,修改字体颜色的实现方法

好吧,背景色还是可以改的。。。有时候说不行,只是没想到而已

以上这篇layer ui插件显示tips时,修改字体颜色的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
javascript实现微信分享
Dec 23 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 #Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 #Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 #Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 #Javascript
You might like
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php实现Mysql简易操作类
2015/10/11 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
浅谈python数据类型及类型转换
2017/12/18 Python
用python实现对比两张图片的不同
2018/02/05 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
创建服务型党组织实施方案
2014/02/25 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
综合实践活动报告
2015/02/05 职场文书
奠基仪式致辞
2015/07/30 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书