antd+全屏的坑(全屏下a-modal/下拉框等不展示)

news2024/9/27 19:24:36
问题:针对某个元素全屏时,下拉框/弹窗/二次确认窗不展示:下拉框是往body里面插入的,全屏的元素盖住了下拉框。解决:给有下拉框的加入:append-to-body="false"(缺点:每个都需要加,后续加的东西可能会有问题)

针对以上问题解决方案

方案一 :改变挂载对象。挂到根节点上:document.documentElement,再使用定位fixed目标元素,改变z-index。(全屏的还是根节点,全屏时给跟节点加class,再进行fixed)。这样解决会有个问题:position: fixed滚动条不可滚动的坑。

原因:position:fixed进行相对于视口(viewport)的定位,且元素的位置在屏幕滚动时不会改变

解决:当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。给祖先元素设置一个transform: scale(1)属性即可。

方案二:全屏的时候给顶级元素加上一个class,写一份存在这个class下的样式去display:none需要隐藏的元素,关闭全屏时去掉这个class即可。(这个方式比较简单粗暴)

示例:

// 全屏事件
handleFullScreen(){
    let appDoc = document.getElementById('app-view'); // 找到跟节点加
    appDoc.setAttribute("class", "full-app"); // 加上这个class

    var element = document.documentElement; // 根结点
    // 如果是全屏状态
    if (this.checkFull()) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
        }
        appDoc.removeAttribute("class", "full-app"); // 退出全屏去掉这个class
    } else {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
        };
    };
},
.full-app { // 隐藏不需要展示的元素
    .bg-gradient-wight,
    .eye-hor-layout .ant-layout-sider,
    .eye-ver-layout__header,
    .ant-tabs-bar, 
    .eye-sky-layout .eye-logo, .eye-sky-layout .ant-layout-header  {
        display: none;
    }
    .eye-hor-layout .ant-layout-sider {
        display: none;
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1151340.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s的概念

概念 它是一种开源的容器编排平台,用于自动化部署,扩展和管理容器化的应用程序,它提供了一种容器编排和管理的方式,可以帮助开发人员更轻松地管理容器化的的应用程序,并且提供了一种跨多个主机的自动化部署和管理机制…

为什么看了那么多测试技术帖,感觉自己还是菜?

作为测试新手,最爱莫过于看各大牛发的技术贴,这篇很牛叉,那篇也很有道理,似乎自己看着看着也会成为高手。然而几年后,发现自己对专业知识的理解乱的很,里面更有很多自相矛盾的地方,这到底是哪里…

PFAF-Net

I 1 _1 1​和I 2 _2 2​是多模态图像,I F _F F​是融合图像。FT 1 _1 1​是基于空间注意力的融合,FT 2 _2 2​是基于通道注意力的融合 作者未提供代码

Spring及SpringBoot中AOP的使用

Spring中AOP示例 <dependencies><!--Spring核心包--><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>5.3.6</version></dependency><!--引入SpringBean--&…

Java工具库——commons-lang3的50个常用方法

未来的你&#xff0c;我亲爱的女孩&#xff0c;愿此刻无忧无虑&#xff0c;开心&#xff0c;快乐… 工具库介绍 Apache Commons Lang 3&#xff08;通常简称为Commons Lang 3&#xff09;是Apache Commons项目中的一个Java工具库&#xff0c;它提供了一系列实用的工具类和方法…

3.6每日一题(线性方程求通解)

1、判断类型选择方法&#xff1a;发现以y为未知函数&#xff0c;以x为自变量&#xff0c;不符合我们学过的类型 2、此时有两种方法&#xff1a; &#xff08;1&#xff09;x 与 y 对调&#xff0c;此时 x 为未知函数&#xff0c;y 为自变量 &#xff08;2&#xff09;变量代换…

【Mybatis-Plus】常见的@table类注解

目录 引入Mybatis-Plus依赖 TableName 当实体类的类名在转成小写后和数据库表名相同时 当实体类的类名在转成小写后和数据库表名不相同时 Tableld TableField 当数据库字段名与实体类成员不一致 成员变量名以is开头&#xff0c;且是布尔值 ​编辑 成员变量名与数据库关…

轻量级 IDE 文本编辑器 Geany 发布 2.0

Geany 是功能强大、稳定、轻量的开发者专用文本编辑器&#xff0c;支持 Linux、Windows 和 macOS&#xff0c;内置支持 50 多种编程语言。 2005 年Geany 发布首个版本 0.1。上周四刚好是 Geany 诞生 18 周年纪念日&#xff0c;官方发布了 2.0 正式版以表庆祝。 下载地址&#…

小红书app拉新上线了 适合网推社群和校园渠道作业

小红书app签到拉新上线了可以通过“聚量推客”进行申请&#xff0c;下面大概是要求和流程 要求网推社群渠道或者地推校园渠道&#xff0c;其它类型渠道禁止

R语言绘图-5-条形图(修改坐标轴以及图例等)

0. 说明&#xff1a; 1. 绘制条形图&#xff1b; 2. 添加文本并调整位置&#xff1b; 3. 调整x轴刻度的字体、角度及颜色&#xff1b; 4. 在导出pdf时&#xff0c;如果没有字体&#xff0c;该怎么解决问题&#xff1b; 1. 结果&#xff1a; 2. 代码&#xff1a; library(ggp…

sql--索引使用 ---覆盖索引

覆盖索引 Select 后接 * 走id索引才是最优&#xff0c;使用二级索引则需要回表&#xff08;性能稍差&#xff09; 前缀索引 Create index 索引名 on 表名( 字段名( n ) ) n数字 n代表提取这个字符串的n个构建索引 &#xff1f;&#xff1f;那么 n 为几性能是最好的呢&…

测试C#调用Aplayer播放视频(1:加载Aplayer控件)

微信公众号“Dotnet跨平台”的文章《开源精品&#xff0c;使用 C# 开发的 KTV 点歌项目》中使用了迅雷开源APlayer播放引擎。最近在学习有哪些能拿来播放视频的组件或控件&#xff0c;于是准备试试&#xff0c;根据文章中的介绍&#xff0c;在迅雷APlayer播放引擎网站中下载了A…

计算机出现msvcr110.dll文件丢失问题的五种常见方法

msvcr110.dll是Microsoft Visual C Redistributable的一部分&#xff0c;它是Windows操作系统上的一个动态链接库文件。它包含了许多与C编程相关的函数和库&#xff0c;用于支持应用程序的运行。如果电脑上缺少msvcr110.dll文件&#xff0c;可能会导致一些应用程序无法正常运行…

TiDB x 汉口银行丨分布式数据库应用实践

汉口银行是一家城市商业银行&#xff0c;近年来专注科技金融、民生金融等领域。在数据库国产化改造中&#xff0c;汉口银行引入了 TiDB 数据库&#xff0c;并将其应用在重要业务系统&#xff1a;头寸系统中&#xff0c;实现了一栈式的数据服务&#xff0c;同时满足了高并发、低…

论文范文:论面向服务的架构

网络文章,仅供学习,建议您考试不要抄范文哦!摘要:2016年8月,我参与了胶凝砂砾石坝施工质量监控系统的开发工作,该系统旨在帮助水利工程建设法人单位、施工企业、监理机构及相关政府部门解决水利工程建设施工质量监控和工程项目管理等问题。我在该项目中担任系统架构设计师…

MDM如何实现不同场景的数据管理

MDM基础数据平台主要是进行清洗和治理企业的主数据&#xff0c;使企业的主数据具有唯一性、准确性、一致性和及时性&#xff0c;但平台在不同的场景中起到的作用也不同。 不同项目的MDM作用不同&#xff0c;在数据中台中MDM主要是作为维度表和一些基础数据的数据上报功能&…

Linux——Linux权限

Linux权限 前言一、shell命令以及运行原理二、Linux权限的概念Linux权限管理文件访问者的分类&#xff08;人&#xff09;文件类型和访问权限&#xff08;事物属性&#xff09;文件权限值的表示方法文件访问权限的相关设置方法 file指令目录的权限粘滞位 总结 前言 linux的学习…

Android多张图片rotation旋转角度叠加/重叠堆放

Android多张图片rotation旋转角度叠加/重叠堆放 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"…

Panda3d 介绍

Panda3d 介绍 文章目录 Panda3d 介绍Panda3d 的安装Panda3d 的坐标系统介绍Panda3d 的运行Panda3d 加载一个熊猫父节点和子节点之间的关系 验证Panda3d 的坐标系统X 轴的平移Y 轴的平移Z 轴的平移X 轴的旋转Y 轴的旋转Z 轴的旋转 Panda3D是一个3D引擎:一个用于3D渲染和游戏开发…

C++ 自引用指针this(整理)

使用例子&#xff1a; #include <iostream> #include <Windows.h> using namespace std; class A { public:A(int x1){x x1;}void disp(){cout<<"this"<<this<<" when x"<<this->x<<endl;} private:int x;…