最新消息:欢迎加入小松的QQ群一起讨论一起学习,搜索页面修改成lua+ElasticSearch,使用php这个页面速度相对慢一点,优化之后速度杠杠的,如有问题请加群联系我

jquery资源分享弹层layer

前端技术 27浏览 0评论

今天推荐一个jquery的弹层layer,目前项目中的弹层都是用layer
layer提供了五种模式的层,分别为:信息框、页面层、iframe层、加载层、tips层,而layer.ext.js提供的拓展层是在这五种模式的基础上创建的。
官方网站:http://layer.layui.com/

使用方法

使用组件时,请将layer整个文件夹放置您项目的任何一个目录下,请务必不要移动layer默认的文件结构,否则将无法运行。部署完后,您只需在页面引入layer.min.js即可(当然,别忘了引入jquery,必须使用jquery1.8或以上)

layer还支持自己定制样式

我做过一个样式定制,下面分享一下

js设置配置的模板

/*图层的全局配置,所有的弹出层都默认采用*/
layer.config({
    skin: 'layerhoney'   // layerhoney -- 该属性值为 CSS的class类样式
})

css 样式

/*弹层标题*/
body .layerhoney .layui-layer-title {
    background: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    padding-top: 10px
}
/*弹层右上角关闭的图标*/
body .layerhoney .layui-layer-ico {
    margin-top: -7px;
    margin-right: -7px;
    width: 18px;
    height: 18px;
    background: url(../images/x.png) no-repeat;
}
/*弹层按钮样式*/
body .layerhoney .layui-layer-btn1 {
    border-radius: 100px;
    background: #e6b226;
    border: 0px;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
}
/*弹层按钮样式*/
body .layerhoney .layui-layer-btn0 {
    border-radius: 100px;
    background: #ffffff;
    border: 1px solid #aaaaaa;
    color: #aaaaaa;
    padding-left: 20px;
    padding-right: 20px;
}
/*弹层按钮样式*/
body .layerhoney .layui-layer-btn {
    text-align: center;
}

修改之后样子图

layer样式定制

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» jquery资源分享弹层layer
本文链接地址:https://www.phpsong.com/3133.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!