2016-09-09 26 views
0

私は自分のhtmlページでフレームセットを使用しています。そのフレームセット内には2つのフレームがあります。最初のフレームにはボタンがあり、クリックするとダイアログボックスが表示されます。問題は、ダイアログボックスが全画面ではなく、上のフレームでのみ表示されることです。ボタンをクリックしてフレームを隠すことができ、全画面でポップアップを表示する方法はありますか?DialogBoxをフルスクリーンで表示

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> 
+0

親(root.html)ページ内のダイアログを開いてダイアログを開くことをお勧めしますページも、親の 'body'要素にフルスクリーンすることができます。フレーム内のイベントを聴くことができます。 SOに関するこの質問を参照してください:http://stackoverflow.com/questions/12032074/triggering-an-event-handler-on-an-element-inside-iframe-from-parent-frame - iframeについては言及していますが、これはフレームセットの 'frame'sの場合にも当てはまるはずです。 –

+0

frame1.html javascript、var f = document.getElementById( 'foo');いくつかのオブジェクトの代わりにnullを与えています。どのようなアイデアをどのようにオブジェクトを取得することができます –

答えて

0

あなたはフルスクリーンにいくつかの要素が必要な場合は、このscreenfull.jsのようなJSライブラリを試すことができます。ここでは、そのライブラリのデモページdemoがこれを達成したいかどうかを確認する

関連する問題