如何更改layui弹出层样式「建议收藏」

如何更改layui弹出层样式「建议收藏」div设置屏幕宽度

大家好,又见面了,我是你们的朋友全栈君。

首先引入插件:

js:

<script src="./layui/src/layui.js"></script>

然后设置layui弹出层内容:

    layer.open({
      skin: 'alert-skin',//弹出层皮肤,可自定义也可用官方
      title: ['导出字段选择', 'color:rgb(139, 181, 219);'],//弹出层title,数组右半部份设置title样式
      area: 'auto',
      maxWidth: 800,
      // maxHeight:1000,
      btn: ['确认导出', '取消'],//设置底部按钮
      btn1: function () {
      },
      //content为弹出层内容
      content: "<table class='table2'><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>姓名</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>身份证号</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>性别</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>出生日期</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>户籍地址</label></td></tr><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>计生情况</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>单位名称</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>保险号</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>起始年月</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>截至年月</label></td></tr><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>身份</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>缴费档次</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>实缴金额</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>缴费时间</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>100</label></td></tr><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>状态</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>已迁出</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>户名</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>卡号</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>开户行</label></td></tr></table><div class='table2-line'></div>"
    });

设置layui的样式,这里以button为例子:

css:

  .alert-skin .layui-layer-btn0 {
    height: 30px;
    text-align: center;
    color: white;
    font-size: 12px;
    border-radius: 5px;
    width: 110px;
  }

注:这里layui-layer-btn0是弹出层下方的第一个按钮,它的类名是官方定义好的,由于直接按钮直接以
btn:[‘确认导出’,’取消’]的方式定义,我们无法定义button的类名,所以要改变按钮的样式就直接在css中用该类名更改。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143113.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • stm32f4的程序移植到stm32f1_试管移植后hcg参考值

    stm32f4的程序移植到stm32f1_试管移植后hcg参考值最近做了从STM32F103到STM32F407的程序移植工作。在做这项工作之前发现网上没有太全面的移植攻略,因而确实费了一番功夫和走了一些弯路。现在程序移植工作基本做完,趁着还能记起来遇到的问题,把程序移植需要注意的点整理在这里,希望对以后做这个工作的朋友能有些帮助。虽然我做的是F407的移植,但是大部分内容对于F40xx_41xx,乃至F4其他系列的芯片都适用。文章如要转载请私

    2022年10月15日
  • vue中map用法_vue里面的meta用法

    vue中map用法_vue里面的meta用法后端给我返回格式是这样[‘2018-8-14’,‘2018-8-14’]但是我是想要{date:“2018/08/13”,title:“”}{date:“2018/08/14”,title:“”}这样的格式一段代码搞定letarr=res.data;letnewArr=arr.map(val=&gt;{…

  • centos route add永久路由_centos追踪路由命令

    centos route add永久路由_centos追踪路由命令netstat-rn或route-n/sbin/routeadd-net192.168.1.0netmask255.255.255.0gw172.122.11.1在rc.local中添加/usr/bin/sudo/sbin/routeadd-host192.168.1.101gw172.122.11.1删除routedel-n

  • kafuka controller控制[通俗易懂]

    kafuka controller控制[通俗易懂]packagecom.chj.cms.controller;importjava.util.HashMap;importjava.util.Map;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importorg.springframework.beans.fa…

  • Pytest(1)安装与入门[通俗易懂]

    Pytest(1)安装与入门[通俗易懂]pytest介绍pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高。根据pytest的官方网站介绍,它

  • create方法 eslint关闭_Vue项目如何关闭Eslint检测

    create方法 eslint关闭_Vue项目如何关闭Eslint检测读取本地外网IP地址读取本地外网IP地址.根据启动并运行的网卡名称,找到本机实际的IP地址(已知当前运行的无线网卡名包含某一个字符)importjava.net.InterfaceAddress;importj…【原创】大众点评监控平台cat的性能分析由于工作的原因,或者说我们之前内部监控设计和实现有点不满足现有的研发需求,所以调研了一下大众点评开源出来的cat这一套监控系统.今…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号