Dialog: Not showing in chrome/firefox fullscreen mode

[dave]

Hi

I am creating a dialog with

$( "div.dialog#MainDialog").dialog({modal: true, title: "MegaTangram Settings", width: 400, height:'auto', autoOpen: false, open: function () { $('.ui-widget-overlay').on('click', function () { $(this).parents("body").find(".ui-dialog-content").dialog("close"); }); }});

and opening with

$( "div.dialog#MainDialog" ).dialog( "open" );

works fine except when I go into fullscreen mode

if(el.webkitRequestFullScreen) {

el.webkitRequestFullScreen();

} else if(el.mozRequestFullScreen) {

el.mozRequestFullScreen();

} else if(el.requestFullscreen) {

el.requestFullscreen()

}

In which case the dialog, although still seen in the developer tools as being present, disappears from view. On exiting full screen mode by pressing esc key the dialog is readily seen.

Linux dave-desktop 3.5.0-43-generic #66-Ubuntu SMP Wed Oct 23 12:01:49 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux

Chrome Version 31.0.1650.57

Cheers

Dave

[Scott González]

Please provide a reduced test case on jsbin or jsFiddle as requested in the red box. You can use ​http://jsfiddle.net/tj_vantoll/QFp2J/ as a starting point.

[dave]

however fullscreen does not work here

​http://jsbin.com/ILatAku/1/edit?html,output

[Scott González]

This is working just fine. You weren't requesting for the dialog to be visible: ​http://jsbin.com/ILatAku/3

[dave]

Thanks for the update, of course you are right, I have to select the dialog itself to go fullscreen not just the background content! Is there a way that the dialog can be shown inline with the background elements and both background and dialog both be seen in fullscreen mode?

$(document).ready(function(){

$("#FullScreen").click(function() {

var el = document.getElementById("section#fullscreen")

if (el.requestFullScreen) {

el.requestFullScreen();

} else if (el.mozRequestFullScreen) {

el.mozRequestFullScreen();

} else if (el.webkitRequestFullScreen) {

el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

}

});

$( "#dialog-modal" ).dialog({

height: 150, appendTo: "section#fullscreen", modal: true

});

});

</script> <section id="fullscreen"> <div id="dialog-modal" title="Basic modal dialog">

<p> click below for fullscreen</p>

<button id="FullScreen" href="#">Full Screen</button>

</div> <p>Sed vel diam id libero Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </section>

[Scott González]

I'm not sure what you're asking, but questions about fullscreen mode should be directed to the forums, Stack Overflow, or IRC.