浅谈layer弹出层按钮颜色修改方法


Posted in Javascript onSeptember 11, 2019

layer弹出层有多种格式的弹出,使用方法也不细述。

在弹出确认框可使用confirm或open方式

在open中

layer.open({
  content: '确认提交?',
  btn: ["确认", "取消"],
  yes: function (index) {
    somefunciton...
    layer.close(index)
  },
  btn2: function (index) {
  }
});

layer中确认按钮在第一个位置,展示也是按顺序展示

如果和自己项目中的风格不一致,需要把确认按钮和取消按钮互换,如果只是简单的把文字互换了,但是按钮的颜色还是没有变化。

这时我们需要做的有:1:变更按钮顺序,2:修改回调函数,3:修改按钮的颜色

layer.open({
  skin: 'demo-class',
  content: '确认提交?',
  btn: ["取消", "确认"],
  yes: function (index) {
    layer.close(index)
  },
  btn2: function (index) {
    somefunciton...
  }
});
 
//在页面style中定义按钮css样式
<style>
 body .demo-class .layui-layer-btn0{
  border-color: #E6E3E6;
  background-color: #FFF;
  color: black;
 }
 body .demo-class .layui-layer-btn1{
  border-color: #4898d5;
  background-color: #2e8ded;
  color: #fff;
 }
</style>

这样调用就可以实现了,confirm的底层实现也是open方式,所以confim也应该是一样的结果,但没有去实验。

以上这篇浅谈layer弹出层按钮颜色修改方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 #Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 #Javascript
You might like
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python如何进入交互模式
2020/07/06 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
C#软件工程师英语面试题
2015/06/07 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
自我鉴定怎么写
2014/01/12 职场文书
网页美工求职信
2014/02/15 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
岗位聘任书范文
2014/03/29 职场文书
工程服务质量承诺书
2015/04/29 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
Win11更新失败并提示0xc1900101
2022/04/19 数码科技