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 remove 自定义数组删除方法
Oct 20 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
ES6新增的数组知识实例小结
May 23 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
Yii2框架中日志的使用方法分析
2017/05/22 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python图像处理之反色实现方法
2015/05/30 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
PyTorch预训练的实现
2019/09/18 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
nohup的用法
2012/11/26 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
护理实习自我鉴定
2013/12/14 职场文书
教师一岗双责责任书
2014/04/16 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
西安兵马俑导游词
2015/02/02 职场文书
幼儿园个人师德总结
2015/02/06 职场文书