打开layer右上角的叉号的审查元素,可以看到运用的是CSS 图像精灵(css sprites定位技术),通常是为了减少网页http请求,加快页面加载速度,提高页面的性能(适合小图) 。

在这张图片上,真好有符合设计师需要的图标,最后一个蓝色的叉号按钮。

需要用到其中之一的叉号按钮,来改变layer弹框右上角关闭按钮的样式,只需要在源代码里面修改一下:

需要打开插件css源代码layer.css
进行修改即可:

.layui-layer-setwin .layui-layer-close1 {
	    background-position: -179px -31px;
	cursor: pointer
}
.layui-layer-setwin a {
position: absolute;
width: 32px;
height: 40px;
 _overflow: hidden;
 top: -28px;
}

ok
效果如下
[外链图片转存失败(img-VnjNylR0-1567395439231)(https://upload-images.jianshu.io/upload_images/5640239-48f4ee5e96698d67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐