浅谈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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
js querySelector() 使用方法
Dec 21 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP加密解密类实例代码
2016/07/20 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
Python常用模块用法分析
2014/09/08 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python实现爬取并分析电商评论
2020/06/19 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
Linux操作面试题
2012/05/16 面试题
高级销售员求职信
2013/10/25 职场文书
英语简历自我评价
2014/01/26 职场文书
一年级语文教学反思
2014/02/13 职场文书
《恐龙》教学反思
2014/04/27 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
安全员岗位职责
2015/02/10 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
python在package下继续嵌套一个package
2022/04/14 Python
Javascript webpack动态import
2022/04/19 Javascript
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers