浅谈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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 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
php ios推送(代码)
2013/07/01 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
运动会致辞稿50字
2014/02/04 职场文书
中学生运动会入场词
2014/02/12 职场文书
美容院营销方案
2014/03/05 职场文书
公开承诺书格式
2014/05/21 职场文书
学校读书活动总结
2014/06/30 职场文书
违纪检讨书
2015/01/27 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
上学路上观后感
2015/06/16 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python