浅谈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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
javascript实现五星评分功能
Nov 10 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
validform表单验证的实现方法
Mar 08 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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 date函数参数详解
2006/11/27 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
D3.js实现雷达图的方法详解
2016/09/22 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python使用range函数计算一组数和的方法
2015/05/07 Python
Python下载网络小说实例代码
2018/02/03 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
工作态度检讨书
2014/02/11 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
开票证明
2015/06/23 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
MySQL深分页问题解决思路
2022/12/24 MySQL