如何更改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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 惠普p1106打印测试页_惠普p1566打印机说明书

    惠普p1106打印测试页_惠普p1566打印机说明书05惠普P1566打印设置与性能测试●惠普P1566打印设置与性能测试★惠普P1566主要的打印设置在打印速度测试开始之前,我们先来了解一下惠普P1566的打印设置。其打印首选项界面简洁,让用户很容易进行需要的设置,它的属性设置界面包括高级、纸张、效果、完成、服务,这5个选项页。下面我们对惠普P1566最主要的纸张/质量设置,以及详细的打印功能做进一步的了解。纸张设置界面惠普P1566的纸张设置界…

    2022年9月4日
  • VMware Workstation 不可恢复错误: (vcpu-0) vcpu-0:VERIFY vmcore/vmm/main/physMem_monitor.c:1123[通俗易懂]

    VMware Workstation 不可恢复错误: (vcpu-0) vcpu-0:VERIFY vmcore/vmm/main/physMem_monitor.c:1123[通俗易懂]使用VMware®Workstation11.1.2build-2780323安装MacOS系统时出现以下错误:VMwareWorkstation不可恢复错误:(vcpu-0)vcpu-0:VERIFYvmcore/vmm/main/physMem_monitor.c:1123日志文件位于“H:\VMware\OSX\vmware.log”中。您可以请求支持。…

    2022年10月3日
  • stun client java实现_STUN Client

    stun client java实现_STUN ClientIsyouremailaddressOK?Youaresignedupforournewslettersbutyouremailaddressiseitherunconfirmed,orhasnotbeenreconfirmedinalongtime.Pleaseclickheretohaveaconfirmationemail…

    2022年7月17日
  • 敏捷过程模型有哪几种_能力模型的第四层能力

    敏捷过程模型有哪几种_能力模型的第四层能力目录 一、模型简介和思想 二、模型结构 第一部分encoder层 第二部分Convolution Layer卷积层 第三部分Co-Predictor Layer联合

    2022年10月27日
  • activiti工作流简介[通俗易懂]

    activiti工作流简介[通俗易懂] 工作流简介工作流定义工作流:  就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档、信息或任务的过程自动进行,从而实现某个预期的业务目标,或者促使此目标的实现”。工作流管理系统(WorkflowManagementSystem,WfMS):  工作流管理系统是一个软件系统,它完成工作量的定义…

    2022年10月6日
  • python pip源更换国内镜像,速度加快10倍

    python pip源更换国内镜像,速度加快10倍python安装第三方模块,更换为国内的资源python的服务器是在国外的,所以我们pip安装pyqt5之类的模块时就很慢了下面就介绍了一些国内的阿里云http://mirrors.aliyun.com/pypi/simple/中国科技大学https://pypi.mirrors.ustc.edu.cn/simple/豆瓣(douban)http://pypi.do…

    2022年8月29日

发表回复

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

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