zoukankan      html  css  js  c++  java
  • 网页全屏,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()
      }
  • 相关阅读:
    三范式
    作用域
    函数传参
    js数据类型
    纯css小图标
    js生成div
    js模拟微信聊天窗口
    js图片切换
    js this指向
    常用实体字符
  • 原文地址:https://www.cnblogs.com/isylar/p/9300489.html
Copyright © 2011-2022 走看看