问题描述
页面主体部分全屏后,页面中的所有弹窗不能显示,退出全屏后,弹窗正常。
解决方法
校园项目中,所有用到的弹窗为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. redis重要知识点

    redis是一种高级的key:value存储系统,其中value支持五种数据类型: 1.字符串(strings) 2.字符串列表(lists) 3.字符串集合(sets) 4.有序字符串集合(sort ...

  2. Fast Matrix Calculation HDU - 4965

    One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...

  3. ListTile

    const ListTile({ Key key, this.leading, // item 前置图标 this.title, // item 标题 this.subtitle, // item 副 ...

  4. java web 的 几种跨域方式

  5. angular7 Rxjs 异步请求

    Promise 和 RxJS 处理异步对比 Promise 处理异步: let promise = new Promise(resolve => { setTimeout(() => { ...

  6. 关于 使用python向qq好友发送消息(对爬虫的作用----当程序执行完毕或者报错无限给自己qq发送消息,直到关闭)

    以前看到网上一些小程序,在处理完事物后会自动发送qq消息,但是一直搞不懂是说明原理.也在网上找过一些python登陆qq发送消息的文字,但是都太复杂了.今天偶然看到一篇文章,是用python调用win ...

  7. P3346 [ZJOI2015]诸神眷顾的幻想乡

    思路 注意到叶子节点(度数为1)只有20个,可以分别以这20个节点为根,把所有子串插入SAM中,统计最后的本质不同的子串个数 所以就是广义SAM了 然后注意要判断一下有无重复插入 代码 #includ ...

  8. twitter ads_campaign management(图示)

    下载链接

  9. Fix Python 3 on Windows error Microsoft Visual C++ 14.0 is required

    Fix Python 3 on Windows error Microsoft Visual C++ 14.0 is required Fix the error for Python 3.6 and ...

  10. C# 获取往控件中拖进的文件或文件夹的信息

    C# 获取往控件中拖进的文件或文件夹的信息(原创)       在做C#的WinForm开发的时候,有时需要用户往指定的控件中拖进文件或者文件夹.然后根据用户拖进来的文件或者文件夹获取其信息并进行下一 ...