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类库D
Oct 24 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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/12/06 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python_LDA实现方法详解
2017/10/25 Python
Django开发中复选框用法示例
2018/03/20 Python
详解python3中tkinter知识点
2018/06/21 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
基于python3实现倒叙字符串
2020/02/18 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
幼儿园三八妇女节活动方案
2014/03/11 职场文书
三好学生事迹材料
2014/12/24 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers