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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
js加强的经典分页实例
Mar 15 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
Angular网络请求的封装方法
May 22 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
python读取Android permission文件
2013/11/01 Python
python入门教程 python入门神图一张
2018/03/05 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python实现一个猜拳游戏
2020/04/05 Python
django rest framework serializers序列化实例
2020/05/13 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
公务员平时考核实施方案
2014/03/11 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
挂靠协议书
2015/01/27 职场文书
文化大革命观后感
2015/06/17 职场文书
初中信息技术教学反思
2016/02/16 职场文书
php引用传递
2021/04/01 PHP
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技