浅谈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 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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连mysql和oracle数据库性能比较
2006/10/09 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
js中的面向对象入门
2017/03/06 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
普罗米修斯教学反思
2014/02/06 职场文书
教师远程培训感言
2014/03/06 职场文书
三万活动总结
2014/04/28 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
违反交通法规检讨书
2014/09/10 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
介绍信格式
2015/01/30 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
python解决12306登录验证码的实现
2021/04/18 Python