CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3fullscreen
David
David

Reputation: 1889

Bootstrap modal issue with browser full screen

I have a div and I preview it fullscreen in browser (requestFullScreen()). Everything works fine but when I open bootstrap modal it shows under fullscreen div (i mean the fullscreen stays over the modal) but when I cancel fullscreen I see modal.

Any ideas how to fix this ??

Upvotes: 3

Views: 4323

Answers (4)

sariDon
sariDon

Reputation: 7971

This generally happens due to default insertion of the modal elements (modal and backdrop) just before the ending of the </body> tag. The modal is hidden behind the fullscreen element (when viewing on full screen).

To overcome this, you have to:

  1. Detect if the display is in full screen (document.fullscreenElement).
  2. If full screen is enabled, you need to bring the modal inside the fullscreen div after 'show'.
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');
    return false;
}

Note: You can place/render the modal anywhere you like in HTML code.

Upvotes: 0

Surjith S M
Surjith S M

Reputation: 6740

Currently, The modal div is out side fullscreen div.

So Please cut from there and paste the entire modal inside the fullscreen div

I don't know the reason, But it is working here.

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

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

</div>

Upvotes: 4

Nishant
Nishant

Reputation: 916

I checked the code and the problem is with the z-index of your modal. Set the z-index to something like this.

.modal { z-index:999999;}

Upvotes: 0

Karthick Kumar
Karthick Kumar

Reputation: 2361

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

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

 try this one

Upvotes: 0

Related Questions