Layui中layer弹出层右上角X关闭按钮样式修改

最新推荐文章于 2024-04-22 14:09:18 发布
最新推荐文章于 2024-04-22 14:09:18 发布
阅读量7.3k 收藏 7
点赞数
分类专栏： layui弹出层 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42555053/article/details/108776924
版权
本文介绍了如何在Layui的layer弹出层中修改右上角X关闭按钮的样式。通过对比修改前后的代码，展示了去除原有类名并添加新类名以实现自定义样式的步骤。
摘要由CSDN通过智能技术生成

Layui中layer弹出层右上角X关闭按钮样式修改

由于项目刚好用到layer弹出层，于是我使用了layer.open()做了一个页面层的弹出效果，但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式，于是对以下代码进行了修改。

修改前的关闭按钮样式：
在这里插入图片描述
修改后的关闭按钮样式：
在这里插入图片描述
修改前代码：

//页面层
   layer.open({
            type: 1,
            title:false,
            skin: 'layui-layer-demo', //样式类名
            area: ['420px', '240px'], //宽高
            content: 'html内容'
最低0.47元/天 解锁文章
不明真相的围观脆皮炸鸡
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
layer弹框内部自定义按钮关闭弹框（实现简单的登录条款）
qq_42756268的博客
04-28 1910
layer弹框内部自定义按钮关闭弹框（实现简单的登录条款） 你好！ 这是你第人生的转折点，你已经将layer弹框收入囊下 这个链接是layer弹框开发使用文档 链接: https://layer.layui.com/ 或者你打开Layui开发使用文档在里面找弹出层是一样的 页面功能展示： 1.点击登录条款弹出弹出层 /* 点击专业医学用户登录条款 */ $("#clau...
layui按钮---Layer自定义按钮，关闭弹出层/弹窗；layer自带按钮
热门推荐
iUserWang
08-09 1万+
本天在写代码过程中遇到一个问题. layer本身自带弹窗按钮，可自定义内容及方法，如下： function openCurtain(){ top.layer.open({ type : 2, area : [ 500, 500 ], maxmin : true, title : '窗帘设置', content : 'meetingController.do?meetingCu...
layer弹框右上角关闭按钮的样式
祈澈菇凉
09-02 9122
打开layer右上角的叉号的审查元素，可以看到运用的是CSS 图像精灵(css sprites定位技术），通常是为了减少网页http请求，加快页面加载速度，提高页面的性能(适合小图) 。 在这张图片上，真好有符合设计师需要的图标，最后一个蓝色的叉号按钮。 需要用到其中之一的叉号按钮，来改变layer弹框右上角关闭按钮的样式，只需要在源代码里面修改一下： 需要打开插件css源代码layer.cs...
layer弹出层点击关闭按钮刷新父页面
最新发布
qq_24100549的博客
04-22 209
例：页面写个a标签方便调用：<a id=“hidalayerclose” style=“display: none;” οnclick=“fureload()”>在弹出层页面，，找到layer关闭按钮，写一个关闭事件，里面去执行js方法。
layer弹出层自定义提交取消按钮
图纸的博客
05-06 7423
首先从js开始 /** * 检查是否选中 */ Sendandre.check = function () { var selected = $('#' + this.id).bootstrapTable('getSelections'); if (selected.length === 0) { Feng.info("请先选中表格中的某一记录！"); ...
layui如何自定义弹出层关闭事件
weixin_30410119的博客
06-22 3915
在某些业务场景下，我们需要自定义弹出层关闭事件，代码示例如下: layui.use('layer', function () { var layer = layui.layer; layer.open({ skin: 'demo-class', type: 1, titl...
浅谈layer弹出层按钮颜色修改方法
10-16
今天小编就为大家分享一篇浅谈layer弹出层按钮颜色修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layer.open隐藏关闭按钮
qq_26993175的博客
08-18 6948
/隐藏弹窗的按钮组。
Layui中Layer弹出层右上角X关闭按钮样式修改
极客神殿
08-28 6360
由于项目刚好用到layer弹出层，于是我使用了layer.open()做了一个页面层的弹出效果，但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式，于是对以下代码进行了修改。 修改前的关闭按钮样式： 修改后的关闭按钮样式： 修改前代码： //页面层 layer.open({ type: 1, title:false, skin: 'layui-layer-demo', //样式类名 area:
Layui点击右上角“×”修改样式
qq_34576513的博客
11-14 2232
layer.open({ type: 1, title: '修改入库单', skin: 'layui-layer-molv', shadeClose: false, shade: 0.5, area: ['85%', '75%'], //anim: 1, content: $("#Edit_Add_ArticleStorage_Di...
layer.open 按钮的点击事件关闭方法
10-18
今天小编就为大家分享一篇layer.open 按钮的点击事件关闭方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
div+css弹出层带关闭按钮
09-01
整理div+css弹出层，带关闭按钮供大家参考
SSM框架JSP使用Layui实现layer弹出层效果
10-15
在SSM（Spring、SpringMVC、MyBatis）框架中，使用JSP页面和Layui前端框架来实现layer弹出层效果是常见的做法，这样可以为用户提供更好的交互体验。Layui是一款轻量级的前端组件库，其中的layer模块提供了丰富的弹窗...
解决layer弹出层中表单不起作用的问题
10-16
总的来说，解决layer弹出层中表单不起作用的问题主要涉及到正确选择弹出层的类型（type），以及合理地利用layui提供的表单渲染和验证功能。确保在创建弹出层时，根据实际需求选择合适的配置，同时对表单元素进行正确...
在layer弹出层中通过ajax返回html拼接字符串填充数据的方法
10-17
在本例中，我们需要在Layer弹出层中显示一组复选框（Checkbox），这些复选框的数据来自服务器。由于视图（View）中无法直接处理复杂的业务逻辑，因此我们选择在用户点击编辑按钮时，通过Ajax向服务器发送请求获取所...
关于layui 弹出层一闪而过就消失的解决方法
10-16
可以使用`layui.layer.load`作为加载提示，直到数据加载完毕后再关闭加载层并打开弹出层。 5. **CSS样式冲突**： 有时候，弹出层消失可能是因为其他CSS样式覆盖了layui的样式。检查全局CSS，确保没有与layui弹出层...
layer.open中的js解释 (右上角“X“关闭按钮触发的回调)
qq_70095877的博客
04-05 3027
layer.open是一个弹出层的方法，属于layui框架中的模块，可以用于在页面中弹出对话框、提示框、确认框等。
layer 弹出层去掉默认关闭按钮href属性
小巷陌影
04-03 7040
弹出层默认关闭按钮，使用<a>标签并且有href属性。造成了鼠标悬浮后会在浏览器左下角出现一个含有href值的白框 既然href没有用就去掉。再将其光标样式更改为小手。 css更改样式 .cursorStyle{ cursor: pointer; } js代码 layer.open({ type: 1, title: false, close...
layui弹出层的按钮怎么设置右下角
06-03
在 layui弹出层中，可以通过设置按钮的class属性来控制按钮的位置。如果需要将按钮设置在弹出层的右下角，可以将按钮的class属性设置为`layui-btn layui-btn-primary layui-btn-radius layui-btn-position layui-right layui-bottom`，其中`layui-right`和`layui-bottom`分别表示将按钮定位到弹出层的右侧和底部。 例如，以下代码可以创建一个包含“确定”和“取消”按钮的弹出层，并将按钮设置在弹出层的右下角： ```javascript layer.open({ title: '提示', content: '确定要删除吗？', btn: ['确定', '取消'], btnAlign: 'c', btn1: function(index, layero){ // 点击确定按钮的回调函数 layer.close(index); }, btn2: function(index, layero){ // 点击取消按钮的回调函数 layer.close(index); }, success: function(layero, index){ // 设置按钮的class属性 layero.find('.layui-layer-btn').addClass('layui-btn-position layui-right layui-bottom'); } }); ``` 在上面的代码中，`success`回调函数会在弹出层打开后被调用，我们在这个函数中找到包含按钮的`div`元素，并将其添加上我们设定的class属性，从而实现将按钮设置在右下角的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值