如何更改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中用该类名更改。

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Idea激活码最新教程2017.1.6版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2017.1.6版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2017 1 6 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2017 1 6 成功激活

    2025年5月25日
    1
  • SQL查询–约束「建议收藏」

    SQL查询–约束「建议收藏」在慕课网上学习时记的关于oracle中约束概念的基础笔记,当初一直对约束的概念不清不楚的,所以找了些资料来看约束是数据库用来确保数据满足业务规则的手段约束的作用:定义规则、确保完整性1.非空约束

    2022年7月2日
    23
  • Centos 安装图形界面与远程使用「建议收藏」

    Centos 安装图形界面与远程使用「建议收藏」Centos安装图形界面与远程登录使用(1)图形界面安装在联网的情况下使用yum命令安装即可需要安装xwindow服务与desktop桌面,不分先后,命令如下:yumgroupinstall”Desktop”yumgroupinstall”XWindowSystem”最后启动输入命令startXvnc

    2022年5月29日
    86
  • python – 关于pycharm选择运行环境「建议收藏」

    python – 关于pycharm选择运行环境「建议收藏」一直用pycharm写代码一直用anaconda管理python环境但是今天我居然发现我不会更改pycharm当前的运行环境到我新建的anacondaenvironment中!配置:系统:win10;GPU:NVIDIAGeForceGTX1050Ti管理平台:anaconda3IDE:Pycharm问题我的anaconda里面有三个环境,第一个是自…

    2022年8月26日
    6
  • Mysql授予权限

    Mysql授予权限授予权限需要使用实例级账户登录后操作,以root为例主要操作包括:查看所有用户 修改密码 删除用户1.查看所有用户所有用户及权限信息存储在mysql数据库的user表中 查看user表的结构descuser;主要字段说明: Host表示允许访问的主机 User表示用户名 authentication_string表示密码,为加密后的值 查看所有…

    2022年7月27日
    10
  • 数组、单链表和双链表建议收藏

    一数组数组中稍微复杂一点的是多维数组和动态数组。对于C语言而言,多维数组本质上也是通过一维数组实现的。至于动态数组,是指数组的容量能动态增长的数组;对于C语言而言,若要提供动态数组,需要手动实现;

    2021年12月19日
    38

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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