Dialog not visible when div is full screen (requestFullscreen)

Dialog not visible when div is full screen (requestFullscreen)

Hi,

I'm building a website where a part can be shown full screen.
Unfortunately when the div is shown in full screen mode, the dialog is hidden behind the full screen div. Only after pressing escape to undo full screen, the dialog is visible.

See code below. Button 'Show full screen' makes the div full screen.
Button 'Show dialog' supposes to show the dialog, but does this only when the div is not full screen.

What am I'm doing wrong?

Thanks!

[code]
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" type="text/css">
    <style>
        body {background-color:lightgrey;}
    </style>
    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" defer></script>
</head>
<body>
    <div>This text won't be full screen.</div>
    <button id="idBtnShowFullScreen">Show full screen</button><br /><br />
    <div id="idContentToShowFullScreen">This text will be full screen.<br />
        <button id="idBtnShowDialog">Show dialog</button><br />
        <div id="idDialog" title="&nbsp;"><p><span id="idDialogMessage">&nbsp;</span></p></div>
    </div>
    <script>
        function requestFullscreen(id) {
            var elem = $(id)[0],
                isFullscreenSupported = false;
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
                isFullscreenSupported = true;
            } else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
                isFullscreenSupported = true;
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
                isFullscreenSupported = true;
            } else if (elem.webkitRequestFullscreen) {
                elem.webkitRequestFullscreen();
                isFullscreenSupported = true;
            }
            return isFullscreenSupported;
        }
        function customAlert(title, message) {
            "use strict";
            $("#idDialogMessage").html(message);

            $("#idDialog").dialog({
                'position': { my: "center", at: "center", of: "#idContentToShowFullScreen" },  //?
                'title': title,
                'modal': true,
                //zIndex: 1001,
                'buttons': [{
                    'text': "OK",
                    'click': function () {
                        $(this).dialog("close");
                    }
                }]
            });
        }
        $("#idBtnShowFullScreen").click(function () {
            requestFullscreen("#idContentToShowFullScreen");
        });
        $("#idBtnShowDialog").click(function () {
            customAlert('Test', 'Dialog is visible!');
        });
    </script>
</body>
</html>
[/code]