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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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制作静态网站的模板框架(一)
2006/10/09 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
目前最全的python的就业方向
2018/06/05 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
自我评价如何写好?
2014/01/05 职场文书
高三地理教学反思
2014/01/11 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
儿童生日会策划方案
2014/05/15 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python