jquery ui modal dialog in browser full screen mode
I would like to have my jquery modal dialogs showing in the browser full screen mode however it is not displaying properly. It is possible to set the dialog in full screen mode by selecting it as the element for requestFullScreen but then the other page content is not shown with the rest of the browser screen blacked out.
Here is my code example of what I would like to acheive, thanks for any help ...
<!doctype html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script type='text/javascript'>
$(document).ready(function(){
$("#full").click(function()
{
var el = document.getElementById("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: "fullscreen",
modal: true
});
});
</script>
<section id="fullscreen">
<div id="dialog-modal" title="Basic modal dialog">
<p> click below for fullscreen</p>
<button id="full" 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>
</body>
</html>
Solution 1:
... the number sign "#" is missing here :
appendTo: "#fullscreen",
Solution 2:
Your Text is there but you can't see it because the text is black and is invisible on the black background.
Try changing the text color, insert this css to see the difference.
<style type="text/css">
body { color: red }
</style>
Solution 3:
No, "appendTo" option in the dialog API function didn't also work for me. I had to do this to make it work:
$("#dialogForm").dialog({
autoOpen: false,
modal: true
});
var uiDialog = $('#dialogForm').closest('.ui-dialog.ui-widget');
uiDialog.appendTo("#divIdToAppendTo");