layui踩过的坑 layer.tips

####改变layer里面的样式,找了很多资料,效果都不太理想,最终,想到了这个办法,代码如下

layer.tips( "<span style='color:#000000;word-wrap:break-word'>"+$(this).attr('content')+"</span>" , $(this),{    tips: [1,'#eee'],    time: 2000,});

就是直接将要显示的数据用标签包裹起来,嘿嘿,layui会解析,在标签里面加自己想要的样式就可以啦,在这里插入图片描述效果就是这样,审美有限哈哈

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您的代码中给 `#Tips2` 元素添加了一个 `click` 事件监听器,在点击 `#Tips2` 元素时会显示一个 `layer.tips`。在 `layer.tips` 的 `success` 回调函数中添加了一个点击事件监听器,用于关闭所有的 `layer.tips`。但是,由于您在添加点击事件监听器时没有等待 `layer.tips` 加载完成,因此很可能会出现立即被关闭的情况。 为了避免这种情况,您可以在 `layer.tips` 的 `end` 回调函数中添加点击事件监听器,确保 `layer.tips` 加载完成后再添加监听器。具体实现方式如下: ```javascript // 给 #Tips2 元素添加一个点击事件监听器 $('#Tips2').on("click", function () { // 显示 layer.tips,并在显示完成后添加点击事件监听器 layer.tips('提示:如果展示的报表格式和导出的不同,需配置导出报表格式', '#Tips2', { tips: 3, success: function (layero) { // 在 end 回调函数中添加点击事件监听器 layero.end(function () { document.addEventListener('click', function (e) { // 判断点击的元素是否为 layer.tips 的目标元素或其子元素 if (!e.target.matches('.layui-layer-Tips') && !e.target.closest('.layui-layer-Tips')) { // 关闭所有的 layer.tips layer.closeAll('tips'); } }); }); } }); $(".layui-layer-tips .layui-layer-content").attr({'style': "opacity: 0.8;left: -47%;font-size: 14px !important;"}); $(".layui-layer-TipsG.layui-layer-TipsB").attr({'style': " right: 12px;left: auto;width: 0;top: -13px !important;left: 48% !important;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid black;transform: rotate(0deg) !important;"}); }); ``` 这段代码中,我们在 `layer.tips` 的 `success` 回调函数中添加了一个 `end` 回调函数,并在其中添加了点击事件监听器,用于关闭所有的 `layer.tips`。由于 `end` 回调函数会在 `layer.tips` 关闭后执行,因此可以确保 `layer.tips` 加载完成后再添加监听器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值