Question

我想在浏览器全屏模式下显示我的jquery模式对话框，但它无法正常显示。通过将对话框选为requestFullScreen的元素，可以将对话框设置为全屏模式，但是其他页面内容不会显示，而其余的浏览器屏幕都会显示为黑屏。

这是我想要实现的代码示例，感谢任何帮助...

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

Answer 1

你的文字在那里，但你看不到它，因为文字是黑色的，在黑色背景上是不可见的。

尝试更改文字颜色，插入此css以查看差异。

<style type="text/css">
        body { color: red }
</style>

Answer 2

......数字符号＆＃34;＃＆＃34;在这里遗失：

appendTo: "#fullscreen",

浏览器全屏模式下的jquery ui模式对话框

2 个答案: