网页全屏,modal 弹框无法显示的问题
问题描述
页面主体部分全屏后,页面中的所有弹窗不能显示,退出全屏后,弹窗正常。
解决方法
校园项目中,所有用到的弹窗为iview的弹窗组件,该弹窗组件会生成在body中,和项目主体app为平行关系,项目主体全屏后,层级最高,弹出会被盖在app层级下面,不能显示。
解决方法--调用document.documentElement
// 全屏
requestFullscreen = (element) => {
const element = element || document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
}
}
// 退出全屏
exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
}
网页全屏,modal 弹框无法显示的问题的更多相关文章
- JavaScript网页全屏API
在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...
- layer 弹框不显示内容
// layer的弹框不显示信息 可能是背景颜色和字体颜色冲突 改下字体颜色即可 layer.msg('<p style="color:black">用户名不能为空&l ...
- iview modal 弹框 模板
iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- Mac下显示网页全屏快捷键
control+command+F mac下谷歌浏览器全屏时隐藏头部:(隐藏标签页和地址栏) command+shift+B
- android-解决全屏-webview-输入框被输入法挡住-FullScreen-adjustResize失效问题
由于公司开发的 App 中,Html 的页面嵌入的有点多,坑爹的是,还有很多输入框,这就算了,还要求全屏.然后就出现了这个情况. 下面来唠叨唠叨具体的来龙去脉. 起初是这样的,整个项目基本完工了.测试 ...
- jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
- 关于微信小程序 modal弹框组件的介绍
微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...
- js实现网页全屏切换(平滑过渡),鼠标滚动切换
实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...
随机推荐
- Sql Server性能定位及改善
使用SQL Server做为后台数据库的应用程序,当程序操作起来很慢的时候,可能是数据库操作被某个进程Block住了,可以使用以下语句查询目前正在运行的进程 select request_sessio ...
- Progressive Scramble【模拟】
问题 J: Progressive Scramble 时间限制: 1 Sec 内存限制: 128 MB 提交: 108 解决: 45 [提交] [状态] [命题人:admin] 题目描述 You ...
- react中使用antd遇到的问题
1.less使用报错 less配置修改一般都是1个修改1个增加 test: /\.(css|less)$/, // 修改 // 增加 { loader: require.resolve('less-l ...
- (转载)【UGUI】侧面滑出的菜单栏,宽度自适应
首先看下项目效果 实现效果 发现实现效果并不难,利用动画(iTween)+UGUI 有一个长按的判断处理即可 附上项目和代码 using System.Collections; using Syste ...
- parquet 简介
原文 Parquet 列式存储格式 面向分析型业务的列式存储格式 由 Twitter 和 Cloudera 合作开发,2015 年 5 月从 Apache 的孵化器里毕业成为 Apache 顶级项目 ...
- C# 说说lock到底锁谁?(2)
摘要 今天在园子里面有园友反馈关于[C#基础]说说lock到底锁谁?文章中lock(this)的问题.后来针对文章中的例子,仔细想了一下,确实不准确,才有了这篇文章的补充,已经对文章中的demo进行修 ...
- JAVA中的值传递和引用传递问题
这是个老生常谈的问题了,引起过无数争论,但可以说一直没有一个令人满意的回答. 有人总结过: 对象是按引用传递的 Java 应用程序有且仅有的一种参数传递机制,即按值传递 按值传递意味着当将一个参数传递 ...
- fail2ban 使用
============= fail2ban install ============= yum update && yum install epel-release yum -y i ...
- Maven 的 settings.xml 配置中的mirror节点
maven2的setting.xml大家都知道,里面有个mirrors节点,用来配置镜像URL. mirrors可以配置多个mirror,每个mirror有id,name,url,mirrorOf属性 ...
- R多行交叉作图
#中文 UTF-8编码 3.4.0library(Hmisc)mydata = read.table('clipboard',header = T)head(mydata)mycol=c(rgb( ...