浅谈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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
JS 事件机制完整示例分析
Jan 15 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python中xrange与yield的用法实例分析
2017/12/26 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
Django如何批量创建Model
2020/09/01 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
信息管理应届生求职信
2014/03/07 职场文书
食品销售计划书
2014/04/26 职场文书
单位委托书怎么写
2014/08/02 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书