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 多级checkbox选择效果
Aug 20 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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中变量及部分适用方法
2008/03/27 PHP
PHP面向对象法则
2012/02/23 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
flask中过滤器的使用详解
2018/08/01 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python移位运算的实现
2019/07/15 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
副职竞争上岗演讲稿
2014/05/12 职场文书
爬山的活动方案
2014/08/16 职场文书
年终工作总结范文2014
2014/11/27 职场文书
教师先进事迹材料
2014/12/16 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
五年级语文教学反思
2016/03/03 职场文书
导游词幽默开场白
2019/06/26 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL