浏览器全屏时的引导模式问题

Question

我有一个 div，我在浏览器中全屏预览它 (

requestFullScreen()

)。 一切正常，但是当我打开引导模式时，它显示在全屏 div 下（我的意思是全屏停留在模式上方），但是当我取消全屏时，我看到模式。

有什么想法可以解决这个问题吗？

Answer 1

目前，

modal

div 位于

fullscreen

div 外侧。

所以请从那里剪切并将整个模态粘贴到

fullscreen

div

中

我不知道原因，但它在这里工作。

<div id="fullscreen">
Lorem ipsum dolor 
<button class="btn launchConfirm">Launch Confirm</button>

<div class="modal fade"> //modal stuff here</div>

</div> 

Answer 2

 $('.modal').on('shown', function() {

$('body').css({
    overflow : 'hidden'
});
 }).on('hidden', function() {
$('body').css({
    overflow : ''
});
 });

 try this one

Answer 3

我检查了代码，问题出在模态的

z-index

上。将 z-index 设置为类似这样的值。

.modal { z-index:999999;}

Answer 4

这通常是由于在

</body>

标签结尾之前默认插入模态元素（模态和背景）而发生的。模式隐藏在全屏元素后面（全屏查看时）。

要克服这个问题，你必须：

1. 检测显示器是否全屏(

   document.fullscreenElement

   )。
2. 如果启用全屏，则需要在“show”之后将模态框带入全屏div内。

function do_full_screen()
{
    if (document.fullscreenElement)
        document.exitFullscreen();
    else
        $('#fullscreen_div').get(0).requestFullscreen();
    return false;
}

function show_my_modal()
{
    $('#modal_div').modal('show');
    if (document.fullscreenElement)
        $('.modal-backdrop, #modal_div').appendTo('#fullscreen_div');
    else
        $('.modal-backdrop, #modal_div').appendTo('body');
    return false;
}

注意：您可以在 HTML 代码中将模态放置/渲染到您喜欢的任何位置。