谈谈layer弹窗自定义样式,防止样式冲突问题(实习第七天)
2016-12-13 21:01
281 查看
如果在一个页面中存在两个以上的layer弹窗,那么当我们修改其中一个弹窗的默认样式的话,其他的弹窗就会受到影响,今天就来谈谈怎么样去避免样式冲突。
我们知道在layer现在支持的两个你默认皮肤是:
layui-layer-lan
layui-layer-molv
由于是默认的skin,所以在开发的时候难免需要自定义一些样式。但是如果一个页面中存在两个以上的弹窗时,由于引用的css样式都需要合并到同一个以css为后缀名的文件中,那么自定义样式的时候会发生样式之间的冲突。
这边提供的方法是在你自定义样式的class名前面加一个skin的class名:
在网上有一片文章的方法是这样的也可以尝试:
css文件夹中的样式
skin是自定义出来的名字叫做:addFri。
layer自定义弹窗样式
问题情境:
在一个全局页面中存在多个layer.open({});layer.open({ type: 2, title: '创建群', area: ['520px', 'auto'], fixed: false, //不固定 maxmin: true, shade: 0, skin: 'layui-layer-rim', content: ['index1.html','no'] });
我们知道在layer现在支持的两个你默认皮肤是:
layui-layer-lan
layui-layer-molv
由于是默认的skin,所以在开发的时候难免需要自定义一些样式。但是如果一个页面中存在两个以上的弹窗时,由于引用的css样式都需要合并到同一个以css为后缀名的文件中,那么自定义样式的时候会发生样式之间的冲突。
这边提供的方法是在你自定义样式的class名前面加一个skin的class名:
.layui-layer-rim .layui-layer-title{ height: 28px!important; line-height: 28px!important; background: #5AC4FF!important; color: #fff!important; border: 0!important; } .layui-layer-rim .layui-layer-title>span{ top: 0!important; left: 125px!important; cursor: pointer!important; }
在网上有一片文章的方法是这样的也可以尝试:
layer.open({ type: 2, title: '添加好友', area: ['520px', 'auto'], fixed: false, //不固定 maxmin: true, shade: 0, skin: 'addFri', content: ['index1.html','no'] });
css文件夹中的样式
body .addFri .layui-layer-title{ height: 28px!important; line-height: 28px!important; background: #5AC4FF!important; color: #fff!important; border: 0!important; } body .addFri .layui-layer-title>span{ top: 0!important; left: 125px!important; cursor: pointer!important; }
skin是自定义出来的名字叫做:addFri。
这边推荐使用第一种方法,亲自测试有效,相对也比较简单!
相关文章推荐
- layer自定义弹窗样式
- layer弹窗的一些样式问题
- 自定义Toast,防止层叠显示问题,和自定义Toast样式
- layer弹窗的一些样式问题
- Android 之LayerDrawable层叠样式layer-list及自定义颜色ProgressBar
- YII框架中使用CDbcriteria添加自定义条件时表别名冲突问题
- JQuery: jquery.select.1.3.6.js 下拉组件样式自定义问题修正
- 方正中间件平台设置表单中自定义样式问题
- 有关 CSS 样式冲突的问题
- SSH:Hibernate log4j与自定义版本冲突问题
- Android 之LayerDrawable层叠样式layer-list及自定义颜色ProgressBar
- 在采用了PRISM框架中为TabControl的TabItem应用自定义样式的问题
- 解决自定义文件上传处理与Spring MultipartResolver的冲突问题
- SharePoint 2010 中使用Ztree和EasyUI样式冲突问题
- 解决鼠标左键单击冲突的问题(防止冒泡)
- Android自定义Dialog对话框样式出现的边框无法填满问题
- 【转载】LxDialog-管理系统无限级自定义样式弹窗
- Axure RP Pro - 相关问题 - 修改自定义样式对已应用该样式部件的逻辑
- 解决自定义$(id)的方法与jquery选择器冲突的问题
- 解决自定义可左右滑动cell时和tableview的滑动手势冲突问题