Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#9691 closed bug (worksforme)

Dialog: Not showing in chrome/firefox fullscreen mode

Reported by: dave Owned by: dave
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:



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) {


} else if(el.mozRequestFullScreen) {


} else if(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



Change History (5)

comment:1 Changed 9 years ago by Scott González

Component: ui.coreui.dialog
Owner: set to dave
Status: newpending
Summary: jquery ui dialog not showing in chrome/firefox fullscreen modeDialog: Not showing in chrome/firefox fullscreen mode

Please provide a reduced test case on jsbin or jsFiddle as requested in the red box. You can use as a starting point.

comment:2 Changed 9 years ago by dave

Status: pendingnew

however fullscreen does not work here,output

comment:3 Changed 9 years ago by Scott González

Resolution: worksforme
Status: newclosed

This is working just fine. You weren't requesting for the dialog to be visible:

comment:4 Changed 9 years ago by 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?


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

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

if (el.requestFullScreen) {


} else if (el.mozRequestFullScreen) {


} else if (el.webkitRequestFullScreen) {




$( "#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>

comment:5 Changed 9 years ago by 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.

Note: See TracTickets for help on using tickets.