Skip to main content

Search and Top Navigation

#9691 closed bug (worksforme)

Opened December 05, 2013 06:37PM UTC

Closed December 05, 2013 07:25PM UTC

Last modified December 05, 2013 08:52PM UTC

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



Attachments (0)
Change History (5)

Changed December 05, 2013 06:53PM UTC by scottgonzalez comment:1

component: ui.coreui.dialog
owner: → 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.

Changed December 05, 2013 07:16PM UTC by dave comment:2

status: pendingnew

however fullscreen does not work here,output

Changed December 05, 2013 07:25PM UTC by scottgonzalez comment:3

resolution: → worksforme
status: newclosed

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

Changed December 05, 2013 08:51PM UTC by dave comment:4

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?




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




<section id="fullscreen">

<div id="dialog-modal" title="Basic modal dialog">

<p> click below for fullscreen</p>

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


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


Changed December 05, 2013 08:52PM UTC by scottgonzalez comment:5

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