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 相关文章推荐
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
js如何获取网页所有图片
May 12 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
javascript实现弹出层效果
Dec 10 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中的Class的几点个人看法
2006/10/09 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python处理大日志文件
2019/07/23 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
餐饮投资计划书
2014/04/25 职场文书
任命书格式
2014/06/05 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
党支部对照检查材料
2014/08/25 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python