问题描述
页面主体部分全屏后,页面中的所有弹窗不能显示,退出全屏后,弹窗正常。
解决方法
校园项目中,所有用到的弹窗为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 弹框无法显示的问题的更多相关文章

  1. JavaScript网页全屏API

    在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...

  2. layer 弹框不显示内容

    // layer的弹框不显示信息 可能是背景颜色和字体颜色冲突 改下字体颜色即可 layer.msg('<p style="color:black">用户名不能为空&l ...

  3. iview modal 弹框 模板

    iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...

  4. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  5. Mac下显示网页全屏快捷键

    control+command+F mac下谷歌浏览器全屏时隐藏头部:(隐藏标签页和地址栏) command+shift+B

  6. android-解决全屏-webview-输入框被输入法挡住-FullScreen-adjustResize失效问题

    由于公司开发的 App 中,Html 的页面嵌入的有点多,坑爹的是,还有很多输入框,这就算了,还要求全屏.然后就出现了这个情况. 下面来唠叨唠叨具体的来龙去脉. 起初是这样的,整个项目基本完工了.测试 ...

  7. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  8. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  9. js实现网页全屏切换(平滑过渡),鼠标滚动切换

    实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...

随机推荐

  1. css根据子元素多少类设置子元素的属性--九宫格

    .moment-image-div:nth-child(n+1):nth-last-child(-n+9){ width: 33.33%; float: left; } .moment-image-d ...

  2. Windows 服务器自动重启定位

    有个非常好的小技巧,就是在服务器端命令行,执行systeminfo,能查到服务器上一次重启的时间,依照这个时间在Event Log里再找相应的日志就容易多了. 补充:还能查到这台服务器是虚拟机还是实体 ...

  3. QComboBox列表项高度设置

    QComboBox列表项高度设置步骤: 1. 设置代理 QStyledItemDelegate *delegate = new QStyledItemDelegate(this); ui->co ...

  4. Reading Lines from File in C++

    Reading Lines from File in C++ In C++, istringstream has been used to read lines from a file. code: ...

  5. 剑指offer(29)最小的K个数

    题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 题目分析 这题有两种方法来做. 第一种就是基于partition的 ...

  6. react的dva框架初试

    使用背景:迫不得已!!(自己入职是以vue技术入职的,说是马上vue项目就来了,让我负责这个项目的前端.但是入职后就让我下了现在这个项目看下,然后就顺理成章的帮忙进行开发了,其实自己一直想要做reac ...

  7. Learning-Python【4】:Python流程控制与循环

    一.if...else分支 1.什么是if判断 判断一个条件如果成立则如何,不成立则如何 2.为何要有if判断 让计算机能像人一样具有判断能力 语法1:if...else if 判断条件: 代码块1 ...

  8. Hadoop数据类型

    hadoop包装了java的基本数据类型使他们实现以上的接口而且给予实现细节,这些类都实现了WritableComparable接口,能够在不同的hadoop节点之间毫无障碍的传输了.

  9. 洛谷 P1273 【有线电视网】

    题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. 从转播站到转播站以及从 ...

  10. JavaScript的Let用法

    let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值. 描述 let 允许你声明一个作用域或被限制在块级中的变量.语句或者表达式. 与var不同的是,它声明的变量只能是全局或者整个函 ...