如何更改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)
上一篇 2022年5月10日 下午11:40
下一篇 2022年5月11日 上午6:00


相关推荐

  • Android Linux内核编译

    Android Linux内核编译

    2021年9月3日
    63
  • 如何理解Python 面向对象编程思想

    如何理解Python 面向对象编程思想Python面向对象编程思想:从四个方面来理解1.宽泛的面向对象的概念举例说明面向过程:做一件事情,从头到尾,每一个细节都要关注,重点在于过程面向对象:做一件事情,用对象去做,不关心细节和过程,万物皆对象

    2025年7月21日
    5
  • 英文斜体复制_斜体英文转换器,斜体英文26个字母可复制

    英文斜体复制_斜体英文转换器,斜体英文26个字母可复制斜体英文在网上用得越来越多,《复仇者联盟4》上映时,很多人在微博上都看到过它里面的经典台词:????????????????????????????????,????????????????????????????????????????????????????????????????????????.还可能看到过:?????????????????????????????????????????????????????????????????????????????????????

    2022年4月29日
    2.0K
  • 单工,半双工,全双工区别以及TDD和FDD区别

    单工,半双工,全双工区别以及TDD和FDD区别作为一名学通信的,居然对这个概念还是没搞清楚,兼职就是丢了大脸了!现在总结如下,理解比较浅,大部分网上查的,有不对的,请批评指正!单工,半双工,全双工区别单工单工就是指A只能发信号,而B只能接收信号,通信是单向的,就象灯塔之于航船——灯塔发出光信号而航船只能接收信号以确保自己行驶在正确的航线上。半双工指一个时间段内只有一个动作发生,举个简单例子,一天窄窄的马路,同时只能有一辆车通过,

    2022年6月12日
    56
  • Git Gitlib Github GitLab Gerrit 区别

    Git Gitlib Github GitLab Gerrit 区别Git 是一种版本控制系统 是一个命令 是一种工具 是一种记录一个或若干文件内容变化 以便将来查阅特定版本修订情况的系统 使用教程 https git scm com book zh v2 关于分支版本库的详解 https learngitbran js org Gitlib 是用于实现 Git 功能的开发库 Github 是一个基于 Git 实现的在线代码托管仓库 包含一个网站界面 向互联网开放 repo repository 的缩写 表示 仓库 都需要 public 公开 如果你想要创建 pr

    2026年3月17日
    2
  • oracle的nvl函数的使用解析「建议收藏」

    oracle的nvl函数的使用解析「建议收藏」Oracle的Nvl函数 nvl()函数从两个表达式返回一个非null值。 语法NVL(eExpression1,eExpression2) 参数eExpression1,eExpression2 如果eExpression1的计算结果为null值,则NVL()返回eExpression2。如果eExpression1的计

    2022年7月15日
    21

发表回复

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

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