layuiadmin layer iframe弹窗背景透明化

易木秋

已于 2022-04-27 17:22:38 修改

阅读量1.9k

点赞数 1

分类专栏： layui 文章标签： js layui

于 2022-04-27 16:43:27 首次发布

本文链接：https://blog.csdn.net/weixin_45444300/article/details/124454100

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、layer自定义皮肤
自定义透明度

body .layeriframe {
      background-color: rgba(255,255,255,0.8);
    }

layui.layer.open({
          type:2,
          skin: 'layeriframe',
	 	  ......//参数省略
          success: function (layero, index) {
            console.log(layero.children()[1].children[0].style)
            //layero.children()[1].children[0].setAttribute("backgroundColor","rgba(255,255,255,0.8)")
            layero.children()[1].children[0].setAttribute("allowTransparency",true)
            //layero.children()[1].children[0].style.backgroundColor = "rgba(255,255,255,0)"
          },
          end:function (){
          }
        });

二、给iframe标签加上allowTransparency属性

在回调函数里通过layero 给iframe标签加上allowTransparency=true
我的代码里面，iframe在layero.children()的下标1的位置，具体下标，可以打印layero.children()看一下

layui.layer.open({
          type:2,
	 	  ......//参数省略
          success: function (layero, index) {
            console.log(layero.children()[1].children[0].style)
            //layero.children()[1].children[0].setAttribute("backgroundColor","rgba(255,255,255,0.8)")
            layero.children()[1].children[0].setAttribute("allowTransparency",true)
            //layero.children()[1].children[0].style.backgroundColor = "rgba(255,255,255,0)"
          },
          end:function (){
          }
        });

也可以直接通过layero对页面文档直接一步到胃, 就不用再执行后续几步操作了

layero.children()[1].children[0].setAttribute("allowTransparency",true)
layero.children()[1].children[0].contentDocument.getElementsByTagName("html")[0].style.backgroundColor = "transparent"
layero.children()[1].children[0].contentDocument.getElementsByTagName("body")[0].style.backgroundColor = "transparent"

三、修改被装载页面的html

在被装载页面的html头文件位置修改background-color样式
原因： layuiadmin框架的admin.css文件里对html标签有全局配置，要覆盖修改
在这里插入图片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" style="background-color: transparent">
<head>

四、修改被装载页面的body样式
修改body的background-color样式为透明

</head>
<body style="background-color: transparent; ">

五、看效果
在这里插入图片描述

易木秋

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
layuiadmin layer iframe弹窗背景透明化

一、layer自定义皮肤自定义透明度body .layeriframe { background-color: rgba(255,255,255,0.8); }layui.layer.open({ type:2, skin: 'layeriframe', ......//参数省略 success: function (layero, index) { console.log(layero
复制链接

扫一扫