繁体   English   中英

是否可以在全屏 div 前面显示全屏 div 之外的 HTML 元素?

Is it possible to show HTML elements that are outside of a fullscreened div in front of the fullscreened div?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我知道如何覆盖 div 中的 HTML 元素,在需要时使用z-index进行全屏显示。 例如,这很好用:

<div id='will-be-fullscreen'>
    <div class='visible-in-fullscreen-mode'>Hi</div>
</div>

但是我有以下情况:

<div id='third-party-code-that-will-be-fullscreen'></div>

<div class='should-be-visible-in-fullscreen-mode'>Hi</div>

我不可能将我的 HTML('Hi' div)放在将全屏显示的 div 中,我也无法控制使其全屏显示的 js。 结果,没有人可以看到我的 HTML,因为它位于全屏 div 后面。 z-index似乎没有什么不同。

有没有办法让 HTML 存在于全屏 div 之外并且在全屏 div 顶部仍然可见?

编辑:jsfiddle 示例: https://jsfiddle.net/sqnLegvb/2/

 function openFullscreen(elem) { document.getElementById('openFS').style.display = 'none'; document.getElementById('closeFS').style.display = 'block'; try { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } catch (e) { console.log(e); } } function closeFullscreen() { document.getElementById('openFS').style.display = 'block'; document.getElementById('closeFS').style.display = 'none'; try { var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; if (isFullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } onCloseFullscreen(); } } catch (e) { // console.log(e); } }
 #fullscreenMe { background: red; position: absolute; z-index: 1; top:0; left:0; height:100%; width:100%; } #pagewrapper { position: absolute; top:0; left:0; height:100%; width:100%; } #hideAndSeek { position: absolute; z-index:1; top:10px; left:10px; background: yellow; } button { position: absolute; top:10px; right:0px; z-index:2 }
 <div id='pagewrapper'> <div id='fullscreenMe'> <button onclick="closeFullscreen();" style="display:none;" id="closeFS"> Close Full Screen </button> </div> <div id="hideAndSeek"> Can you see me? </div> <button onclick="openFullscreen(document.getElementById('fullscreenMe'));" id="openFS"> Full Screen </button> </div>

问题暂未有回复.您可以查看右边的相关问题.
2 如何在HTML5全屏视频上显示DIV?

我现在的最终目标是在视频播放结束时在视频顶部显示一个链接。 使用JW播放器功能我已确定如何在视频完成时显示链接但仅在标准视图中显示。 如果用户以全屏方式查看视频,则不会显示该链接。 我已经做了大量阅读并理解,当它处于全屏模式时,视频处于闪存状态,如果不将链接集成到swf文件中,我无法覆盖闪 ...

3 div以全屏显示

我是html的新手。 当我按下Alt和空格键时,能否使网页中的特定div以全屏显示? 这是我的代码。 ...

2013-08-28 07:36:49 2 238   html/ css
4 没有iframe的全屏div如何显示?

我的网站https://saxobroko.gq具有多个div作为不同的窗口,当我拿下div时,它们将停止适合整个页面。 我尝试使用css使其不使用iframe并仅使用&lt;p&gt;Test&lt;/p&gt; 我希望iframe可以适合用户的视图,而不需要iframe。 ...

5 如何使用HTML5的全屏API检查元素是否全屏显示

问题几乎在标题中。 我想返回一个值,告诉我有问题的元素是否全屏显示。 我怎么用javascript做到这一点? 这似乎不起作用: //对不起,我真的不懂js。 因此,如果你做一个例子,请使用'canvas'作为问题。 ...

6 HTML5全屏API和DIV

所以我正在使用谷歌地图创建一个地理定位器工具。 虽然您可以在页面上设置标记,但我想让Google Maps div全屏显示。 经过一些简短的研究,我遇到了http://demosthenes.info/blog/708/Introducing-the-HTML5-FullScreen-A ...

7 Canvas 全屏隐藏我的 div 元素

我目前正在使用 panolens.js 和 three.js 进行 360 度全景项目。 Panolens 有全屏模式,但问题是进入全屏模式后,canvas 隐藏了我所有的 div 元素。 我有一个文本元素显示加载了哪个图像。 我试图提出解决方案,例如在 canvas 本身中创建文本,但这对我来说 ...

8 全屏显示div内容(googlemap)

我试图创建一个按钮,将googlemap div变成全屏..这是我直到现在所拥有的,但是它不能正常工作..问题是:该地图将只加载下面代码的一半,并提供屏幕截图 我该如何修理? 问题出在哪儿? 提前致谢 http://img32.imageshack.us/img32/9365/h ...

9 使DIV全屏显示,无论位置如何

有没有办法使DIV全屏显示,而不管它在HTML页面中的位置? 在某些页面中,我希望DIV覆盖其后面的所有内容,但是如果主体仅是屏幕的一半,我的DIV也将变为屏幕的一半而不是全屏。 我使用以下CSS: ...

2013-03-11 18:56:49 1 2457   html/ css
10 使用DOJO全屏显示div

我有一个带有DOJO表的div。 我想以全屏显示div。 我尝试使用HTML5 API,但高度和宽度在全屏模式下并未放大。 通过仅包含DOJO表的div可以实现全屏的其他方法还有哪些? 这是我的桌子。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM