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