问题描述
页面主体部分全屏后,页面中的所有弹窗不能显示,退出全屏后,弹窗正常。
解决方法
校园项目中,所有用到的弹窗为iview的弹窗组件,该弹窗组件会生成在body中,和项目主体app为平行关系,项目主体全屏后,层级最高,弹出会被盖在app层级下面,不能显示。
解决方法--调用document.documentElement

  1. // 全屏
  2. requestFullscreen = (element) => {
  3. const element = element || document.documentElement
  4. if (element.requestFullscreen) {
  5. element.requestFullscreen()
  6. } else if (element.msRequestFullscreen) {
  7. element.msRequestFullscreen()
  8. } else if (element.mozRequestFullScreen) {
  9. element.mozRequestFullScreen()
  10. } else if (element.webkitRequestFullscreen) {
  11. element.webkitRequestFullscreen()
  12. }
  13. }
  14. // 退出全屏
  15. exitFullscreen = () => {
  16. if (document.exitFullscreen) {
  17. document.exitFullscreen()
  18. } else if (document.msExitFullscreen) {
  19. document.msExitFullscreen()
  20. } else if (document.mozCancelFullScreen) {
  21. document.mozCancelFullScreen()
  22. } else if (document.webkitCancelFullScreen) {
  23. document.webkitCancelFullScreen()
  24. }

网页全屏,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. DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined

    DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined 原因:table 中定义的列和aoColumns ...

  2. MySQL5.7 编译安装

    准备 yum install cmake yum install -y bison yum install -y libaio-devel yum install -y boost 下载 percon ...

  3. Bugku-CTF之点击一百万次

    Day16 点击一百万次 http://123.206.87.240:9001/test/ hints:JavaScript  

  4. Servlet运行原理以及生命周期

    一.Servlet生命周期: Servlet加载.实例化.初始化.服务.销毁. 1.初始化init(): 当服务启动时,Servlet被装入tomcat或者其他服务器容器时执行(服务器容器从启动到停止 ...

  5. java基础语法2.

    第二章 2.1 class文件的生成 java文件为源代码文件 class为程序. class文件实时修改. eclipse自动生成. project下面clean. 2.2 jar文件 如何将有用的 ...

  6. Linux 安装搭建 tftpd 服务器

    ---------- For Ubantu 18.0.4 ---------- 0.安装tftp-server sudo apt-get install tftpd-hpa (服务器端) sudo a ...

  7. adb shell 命令之----pm

    常用的用法: 查看已经安装的包: pm list packages 查看已经安装的包以及apk路径(-3:只看第三方应用: -s:只看系统应用) -f: see their associated fi ...

  8. Paper Read: Convolutional Image Captioning

    Convolutional Image Captioning 2018-11-04 20:42:07 Paper: http://openaccess.thecvf.com/content_cvpr_ ...

  9. springboot使用@Schednled 注解实现定时任务

    part 1: @Component public class Scheduled { SimpleDateFormat dateFormat = new SimpleDateFormat(" ...

  10. _spellmod

    -- 技能修改 -- 小技巧:可以针对技能进行修改 (进行会对其进行更新,增加技能开关) `comment` 备注 `spellId` 技能ID `reqId`需求ID `dmgMod`伤害倍数 `h ...