おやじのweb工房/b006/ダイアログボックス(モーダルウィンドウ)を開く(基本技)

【おやじのweb技】 html/javascript/css等の基本技
winXP+IE6

TopPage表示 / 保　存 / 印　刷 / Window Resize / Window Close

b006

ダイアログボックス(モーダルウィンドウ)を開く(基本技)

【目次】
◇【技b006-1】ダイアログボックス(モーダルウィンドウ)を開く
　　　モーダルで開く
　　　モーダレスで開く
◇【技b006-2】親ウィンドウからダイアログボックス(子ウィンドウ)に値を渡す
◇【技b006-3】ダイアログボックス(子ウィンドウ)から親ウィンドウに値を渡す
◇【解説等】

このページのトップに戻る / Window Resize / Window Close / 最終更新日表示

action
&
web技

｜topへ｜目次へ｜前へ｜次へ｜

**【技b006-1】警告ウィンドウ風のダイアログボックスを開く**
サンプルをモーダルで開くサンプルをモーダレスで開く	リンク文字をクッリクして下さい。警告(alert)ウィンドウ風のhtmlファイルを開きます。 ※[モーダルで開く]＝ダイアログボックス(モーダルウィンドウ)のみ操作可能です。 ※[モーダレスで開く]＝ダイアログボックス(モーダレスウィンドウ)を開いたこのファイルを操作することができます。 ※表示するウィンドウはhtmlファイルなので、自由に改変できます。
■親ウィンドウ ◆手順1【スクリプトの起動】(リンク文字) -----次の行から(copy)----- <a href="javascript://" onclick="m_winOpen_modal()">モーダルで開く</a> <a href="javascript://" onclick="m_winOpen_modaless()">モーダレスで開く</a> -----上の行まで(copy)----- ◆手順2【javascript】 ※<head>～</head>に記述します -----次の行から(copy)----- //モーダルで開く function m_winOpen_modal() { 　var newWin_A; 　newWin_A=window.showModalDialog("b006/sample_b006_1.html","Alert_A", 　　　"dialogHeight:190px; dialogWidth:265px; dialogTop:100px; dialogLeft:100px; scroll:0; status:0; resizable:1;"); } //モーダレスで開く function m_winOpen_modaless() { 　var newWin_B; 　newWin_B=window.showModelessDialog("b006/sample_b006_1.html","Alert_B", 　　　"dialogHeight:190px; dialogWidth:265px; scroll:0; status:0; resizable:0;"); } -----上の行まで(copy)----- ※showModalDialog("htmlファイルのパス","ウィンドウ名","設定値")です。 [設定値] 　dialogHeight:190px; ダイアログの幅(px) 　dialogWidth:265px; ダイアログの幅(px) 　dialogTop:100px; ダイアログの位置(ウィンドウ上端からの距離 px) 　dialogLeft:100px; ダイアログの位置(ウィンドウ左端からの距離 px)< 　　　(dialogTop/dialogLeftを省略するとウィンドウ中央に表示) 　scroll:0; スクロールバー表示(省略すると表示) 　status:0; ステータスバー表示(省略すると表示) 　resizable:1; ウィンドウの大きさ可変(省略すると可変不可) ■ダイアログボックス(子ウィンドウ)側 ※[OK]ボタンを設置します([OK]ボタンをクリックするとダイアログボックスをクローズする) <button type="submit" value="yes" title="ok" onclick="javascript:self.window.close()">OK</button> 　　　window.close()はself.window.close()のようにselfをつけた方がいいようです ※ダイアログボックスの背景色とウィンドウ境界の種類を設定しています <body style="background-color:#c0c0c0;border-style:outset;"> 　　　border-style:outset;は境界を浮き上がらせます

｜topへ｜目次へ｜前へ｜次へ｜

**【技b006-2】親ウィンドウからダイアログボックス(子ウィンドウ)に値を渡す**
	セレクトボックスから写真を選択して｢表示｣ボタンをクッリクして下さい。操作を継続するかどうか確認(confirm)ウィンドウ風のhtmlファイルをモーダルで開きます。 ※ダイアログボックスには左のセレクトボックスで選択した画像名を渡します。 ※ダイアログボックスで[OK]ボタンを選択すると、渡された値の画像を新しいウィンドウに表示します。 ※画像表示以外にもスクリプトを実行する等の確認画面として使用できます。
■親ウィンドウ側 ◆手順1【セレクトボックスの設置とスクリプトの起動】(ボタンから実行) -----次の行から(copy)----- <select name="PhotoMenu" title="表示する写真を選択して下さい"> 　<option value="001">初冬の大井川/photo001</option> 　<option value="002">初冬の大井川/photo002</option> 　<option value="003">初冬の大井川/photo003</option> 　</select> <input type="button" value="表示" onclick="m_winOpen_modal2()"> -----上の行まで(copy)----- ◆手順2【javascript】(ダイアログを表示) ※<head>～</head>に記述します ※ダイアログに引き渡す値は、セレクトメニューのname属性を指定したvalue属性の設定値です。　　　document.all.PhotoMenu.value(PhotoMenuはセレクトメニューのname属性) -----次の行から(copy)----- function m_winOpen_modal2() { 　window.showModalDialog("b006/sample_b006_2.html",document.all.PhotoMenu.value, 　　　"dialogHeight:190px; dialogWidth:265px; scroll:0; status:0; resizable:1;"); } -----上の行まで(copy)----- ■ダイアログボックス(子ウィンドウ側) ◆手順3【テキストボックスの設置】引き渡された値の表示 ※引き渡された値を表示するテキストボックス(FORM.Photo.value)です。 -----次の行から(copy)----- <form name="FORM"> [初冬の大井川/photo <input type="text" name="Photo" size="3" readonly style=border-style:none;background-color:#c0c0c0;text-align:center;>] を表示していいですか? </form> -----上の行まで(copy)----- ◆手順4【javascript】引き渡された値の取得 ※<head>～</head>に記述します ※引き渡された値をwindow.dialogArgumentsで取得しテキストボックス(FORM.Photo.value)に表示しています。 -----次の行から(copy)----- function Menu() { 　FORM.Photo.value=window.dialogArguments; } -----上の行まで(copy)----- ◆手順5【スクリプトの実行】ダイアログボックスオープン時に実行 ※<body～>に記述します -----次の行から(copy)----- <body onload="Menu()"> -----上の行まで(copy)----- ◆手順6【OKボタンの設置】 ※[OK]ボタンクリックするとOk()を実行後、ダイアログボックスをクローズします。 -----次の行から(copy)----- <button type="submit" value="ok" title="ok" onclick="Ok();window.close()">OK</button> <button type="reset" title="cancel" onclick="javascript:window.close()">Cancel</button> -----上の行まで(copy)----- ◆手順7【javascript】([OKボタン]選択時に実行する -----次の行から(copy)----- function Ok() { 　var Photo_Path="photo/" + FORM.Photo.value + ".JPG"; 　var WINWIDTH;　//画像の幅　var WINHEIGHT;　//画像の高さ　var subWin; 　subWin=window.open("","WIN_b006","top=100,left=50,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0"); 　subWin.document.open();　//ドキュメントストリームを開く　subWin.document.write("<html><head>");　//以下にドキュメントを書き出す　subWin.document.write("<title>サンプル</title>"); 　subWin.document.write("<style type='text/css'> body { font-family: ＭＳＰゴシック; font-size:11pt; background-color:#000000; color:#ffffff;} </style></head>"); 　subWin.document.write("<body onBlur='focus()'>"); 　subWin.document.write("<div style='top:20px; left:20px; position:absolute;'> " +"<a href='JavaScript:window.close()' title='Windowを閉じる'>Windowを閉じる</a><br><br>"); 　subWin.document.write("<img src='" + Photo_Path + "' name='PIC' border='1'></div>"); 　subWin.document.write("</body></html>"); 　subWin.document.close();　//ドキュメントストリームを閉じる　WINWIDTH=subWin.document.PIC.width+50;　//ウィンドウの幅(画像幅+余白) 　WINHEIGHT=subWin.document.PIC.height+100;　//ウィンドウの高さ(画像高さ幅+余白) 　subWin.resizeTo(WINWIDTH,WINHEIGHT);　//ウィンドウのサイズ変更) } -----上の行まで(copy)----- ■応用技 ※サンプル画面で[ok]ボタンを選択して画像を表示する技は　[技k010]ウィンドウをオープンしたとき画像サイズに合わせてウィンドウサイズを変える、を参照して下さい。

｜topへ｜目次へ｜前へ｜次へ｜

**【技b006-3】ダイアログボックス(子ウィンドウ)から親ウィンドウに値を渡す**
	下に表示する画像を選択するダイアログボックスを開きます。左の｢表示画像選択｣ボタンをクリックして下さい。 ※ダイアログボックスで表示する画像名を選択し、左下のテキストフィールドに画像名を表示するとともに、下記に画像を表示します(表示する画像名がダイアログボックスから親ウィンドウに渡されます)。 ※表示するウィンドウはhtmlファイルなので、自由に改変できます。
表示する画像名
■親ウィンドウ側 ◆手順1【ボタンの設置】(ダイアログボックスを開く) -----次の行から(copy)----- <input type="button" value="表示画像選択" onclick="m_winOpen_modal3('b006/sample_b006_3.html')"> -----上の行まで(copy)----- ◆手順2【javascript】(ダイアログを表示) ※<head>～</head>に記述します ※ダイアログをオープンした後で、if文により選択結果の分岐を記述しています　　　if (typeof(newWin_C)=="undefined") 　　　　　キャンセルボタンを選択すると戻り値 newWin_C は undefined となります　　　　　typeof()で変数の存在を調べます　　　newWin_Cに値が代入されていれば、newWin_Cをテキストフィールドに表示し、画像も変更します -----次の行から(copy)----- function m_winOpen_modal3() { 　var newWin_C; 　newWin_C=window.showModalDialog("b006/sample_b006_3.html","window","dialogHeight:250px; dialogWidth:360px; scroll:0; status:0; resizable:1;"); 　　if (typeof(newWin_C)=="undefined") { //ダイアログボックスで｢キャンセル時｣の処置(変数の存在チェック) 　　document.all.Photo_No.value = ""; 　　document.Photo_Img.src= "b006/photo3/001.JPG"; 　} else { 　　document.all.Photo_No.value = newWin_C; 　　document.Photo_Img.src= "b006/photo3/" + document.all.Photo_No.value + ".JPG"; 　} } -----上の行まで(copy)----- ■ダイアログボックス(子ウィンドウ側) ◆手順3【サンプルファイル】 ※サンプルファイルのソースです(主要部分のみ/説明に不要な部分は省略しています) -----次の行から(copy)----- <html> <head> <title>確認</title> <script type="text/javascript"> <!-- //画像が選択されないで[OK]ボタンが選択された場合の処置 function Ok3() { 　var Photo_No=document.FORM.Photo.value; 　if (Photo_No!="") { 　　window.returnValue=Photo_No; 　　self.window.close(); 　} } //--> </script> </head> <body style="background-color:#c0c0c0;border-style:outset;"> <table align="center" width="350" cellpadding="0" cellspacing="10" style="font-size:10pt;line-height:150%;"> <colgroup align="center" valign="middle"></colgroup> <tr><td> <form name="FORM"> 画像をクリックすると画像番号が表示されますので、<br>[OK]ボタンを選択して下さい。<br><br> 選択画像No[ <input type="text" name="Photo" size="3" readonly style=border-style:none;background-color:#c0c0c0;text-align:center;>]　　　<button type="submit" onclick="Ok3();return false;">O K</button> 　<button type="submit" onclick="javascript:FORM.Photo.value='';return false;">Clear</button> 　<button type="reset" onclick="javascript:self.window.close()">Cancel</button> </form> </td></tr> <tr><td> 　<img src="photo3/001_s.JPG" style=" onclick="javascript:FORM.Photo.value='001'"> 　<img src="photo3/002_s.JPG" style=" onclick="javascript:FORM.Photo.value='002'"> 　<img src="photo3/003_s.JPG" style=" onclick="javascript:FORM.Photo.value='003'"> </td></tr> </table> </body> </html> -----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜

解説等

◆alertやconfirmではなくshowModalDialogでダイアログボックスを開く技はhtmlファイルなので自由に改変でき、より応用範囲が拡がります。

◆基本的にwindow.open()と同じ技ですが、親ウィンドウの手前に表示(フォーカスが維持)されます。
※モーダルで開くと、親ウィンドウの操作はできません。
※モーダレスで開いた場合のみ親ウィンドウを操作することができます。

【類似技】
　　[技t003]確認ウィンドウ(confirm)/警告ウィンドウ(alert)を表示する

keyword

◇window.showModalDialog◇showModalessDialog

history

◇(2004.12.19)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----