Question

我在我的html页面中使用frameset，在该框架内部有两个框架。第一帧有一个按钮，点击后会显示对话框。问题是对话框只出现在顶部框架而不是全屏。有没有办法可以在点击按钮时隐藏框架并在全屏显示弹出窗口。

root.html

<html
<frameset id="foo" rows="100,*" frameborder="0" framespacing="0">
        <frame name="frame1" scrolling="no" src="frame1.html" >
        <frame name="frame2" scrolling="yes" src="frame2.html">
</frameset>
</body>
</html>

frame1.html

    <html>

    <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="http:/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
      <script>

      function showDialog()
      {
var f  = parent.document.getElementById('foo');
    alert(f);
        //parent.document.getElementsByTagName('frameset')[0].rows = "100%,0";
      $( "#dialog" ).dialog();
      }

      </script>
    </head>

    <body>

      <p> Top Frame  </p>

      <button onclick="showDialog();">click Here </button> 

      <div id="dialog" title="Basic dialog">
      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    </body>
    </html>

frame2.html

<html>
<body>
   Bottom Frame
</body>
</html>

Answer 1

如果你想在全屏上使用某个元素，你可以像这样screenfull.js尝试js库。这是该库demo的演示页面，用于检查这是否是您想要实现的目标

全屏显示DialogBox

1 个答案: