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: |
Description
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
Attachments (0)
Change History (5)
Changed December 05, 2013 06:53PM UTC by comment:1
| component: | ui.core → ui.dialog |
|---|---|
| owner: | → dave |
| status: | new → pending |
| summary: | jquery ui dialog not showing in chrome/firefox fullscreen mode → Dialog: Not showing in chrome/firefox fullscreen mode |
Changed December 05, 2013 07:16PM UTC by comment:2
| status: | pending → new |
|---|
however fullscreen does not work here
Changed December 05, 2013 07:25PM UTC by comment:3
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
This is working just fine. You weren't requesting for the dialog to be visible: http://jsbin.com/ILatAku/3
Changed December 05, 2013 08:51PM UTC by 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?
$(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>
Changed December 05, 2013 08:52PM UTC by 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.
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.