Dialog

サイズを指定して Dialog を開きます。
Dialog はマウスのクリックで閉じます。
320x240サイズでダイアログを開く

  1. "dlg.html" を呼び出して Dialog を開きます。
    以前は showModalDialog() が使えたのですが 廃止された ようです。
    function mdlg()
    {
      showModalDialog("dlg.html");
    }
    
  2. 仕方が無いので window.open() を使うことにします。
    Dialog を呼び出すソースコードです。
    href="javascript:mdlg()" のクリックで mdlg 関数を呼び出します。
    mdlg 関数から dlg.html を呼び出します。
    window.open("dlg.html","dlg","dialogWidth:320px;dialogHeight:240px"); で Dialog のサイズを設定します。
    【Source Code】
    <script type="text/javascript">
    <!--
    function mdlg()
    {
      window.open("dlg.html","dlg","dialogWidth:320px;dialogHeight:240px");
    }
    // -->
    </script>
    </head>
    
    <body>
    <h2>Dialog</h2>
    サイズを指定して Dialog を開きます。<br>
    Dialog はマウスのクリックで閉じます。<br>
    
    <a href="javascript:mdlg()">320x240サイズでダイアログを開く</a><br>
    
  3. 呼び出される dlg.html です。
    マウスをクリックすると mousedown() 関数が呼び出されて close() で閉じます。
    close() が使えるのは window.open() で開いたページに限ります。
    【dlg.html Source Code】
    <html>
    <head>
    <title>Dialog</title>
    <script type="text/javascript">
    window.onmousedown = mousedown;
    function mousedown()
    {   close();  }
    </script>
    </head>
    
    <body>
    <h3>dlg.html</h3>
    <div id="div_id">
    他のページから<br>
    呼び出される HTML<br>
    マウスクリックで閉じる<br>
    </div>
    </body>
    </html>
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)