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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
JS 控件事件小结
Oct 31 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
浅谈javascript错误处理
Aug 11 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 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快速统计某个数据库中每张表的数据量
2012/09/04 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
vue实现购物车功能(商品分类)
2020/04/20 Javascript
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python测试模块doctest使用解析
2019/08/10 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
10个顶级Python实用库推荐
2021/03/04 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
解除财产保全担保书
2014/05/20 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python