网页全屏,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=" ...
随机推荐
- LeetCode #003# Longest Substring Without Repeating Characters(js描述)
索引 思路1:分治策略 思路2:Brute Force - O(n^3) 思路3:动态规划? O(n^2)版,错解之一:420 ms O(n^2)版,错解之二:388 ms O(n)版,思路转变: 1 ...
- Configuration in ASP.NET Core(未完,待续)
Configuration in ASP.NET Core App configuration in ASP.NET Core is based on key-value pairs establis ...
- redis+spring 整合
最近在研究redis也结合了许多网上的资料分享给大家,有些不足的还望大家多补充提点,下面直接进入主题. 结构图: 几个redis的核心jar,spring的一些jar自行导入 接下来开始配置项目: 1 ...
- python requests用法总结
requests是一个很实用的Python HTTP客户端库,编写爬虫和测试服务器响应数据时经常会用到.可以说,Requests 完全满足如今网络的需求 本文全部来源于官方文档 http://docs ...
- 714-Card Trick
思维题,把n个卡片倒着放,然后每个卡片循环放到最底下i次,最后出来的结果就是要求的卡牌顺序 #include<stdio.h> #include<string.h> #incl ...
- Fatal error: ENOSPC: System limit for number of file watchers reached
参考https://www.jianshu.com/p/4d2edd55b471 echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/ ...
- 1. Two Sum&&15. 3Sum&&18. 4Sum
题目: 1. Two Sum Given an array of integers, return indices of the two numbers such that they add up t ...
- django学习之——Model
打开 settings.py 找到 DATABASE 配置我们的数据库,(MySQL) # Database # https://docs.djangoproject.com/en/1.7/ref/ ...
- python -- 字典 集合
1.字典 定义:字典是以 key :value 的形式来保存数据,用{} 来表示,存储的是 key : value 查找效率比较高(注:字典存储数据时,用的是hash值 ...
- configparser配置文件管理
写入内容到配置文件 import configparser config = configparser.ConfigParser() #实例化一个configparser对象,config={} co ...