JavaScript Part2

ポップアップウィンドウについて Part2

JavaScriptでポップアップウィンドウを表示させる方法について Part2を記述します。
JavaScript標準では、alertやconfirmといった関数もあります。
第1弾ではjQeury UIのdialogウィジェットを紹介しました。

このページでは、Javascript標準のwindow.openを紹介します。
詳細は、とほほのWWW入門のウィンドウ（Window）のページをご覧ください。

とほほのWWW入門ウィンドウ（Window）

以下は、サンプルです。

サンプル

ポイント

ここでは、ポップアップするページをjavascriptで記述していますが、新規にHTMLファイルを作成して
そのHTMLファイルをwindow.openで指定しても構いません。
window.openでは、アドレスバーの非表示の指定はできません。(location＝noが効かない)
window.openで開きjavascriptでdocument.writeしたウィンドウは、ソースが表示できません。
Google Chromeでは「検証」、Microsoft Edgeでは、「開発者ツールで調査する」で内容確認はできます。
javascriptでdocument.writeしたポップアップウィンドウ内でもJavascriptを記述できますが、</script>の記述に注意が必要です。
具体的には、<\/script>のように/の前に\を記述します。
元のウィンドウの入力欄(テキストフィールド)に値を戻すには、openerを使用します。
とほほのWWW入門（opener）を参照してください。

サンプルソース

<html charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<title>JavaScriptサンプル2</title>
<style>
body {
background-color: white;
}
</style>
<script>
function popup3(){
swin = window.open("","popup","left=800,width=600,height=300,scrollbars=yes");
window.swin.document.write("<html><head><title>ポップアップ3</title>");
window.swin.document.write("<style>");
window.swin.document.write("body {");
window.swin.document.write("background-color: #f0fff0;");
window.swin.document.write("line-height: 16px;");
window.swin.document.write("}");
window.swin.document.write("table {");
window.swin.document.write("font-size: large;");
window.swin.document.write("}");
window.swin.document.write(".sizeUpRadio { transform: scale(1.4); }");
window.swin.document.write(".sizeUpText { font-size: 120%; }");
window.swin.document.write("</style>");
window.swin.document.write("<script>");
window.swin.document.write("function inputText(){");
window.swin.document.write(" checkedFlag = false;");
window.swin.document.write(" if (document.form2.select.length > 0){");
window.swin.document.write(" for (i = 0; i < document.form2.select.length; i++){");
window.swin.document.write(" if (document.form2.select[i].checked){");
window.swin.document.write(" checkedFlag = true;");
window.swin.document.write(" break;");
window.swin.document.write(" }");
window.swin.document.write(" }");
window.swin.document.write(" }");
window.swin.document.write(" if (checkedFlag == false){");
window.swin.document.write(" alert('選択してください');");
window.swin.document.write(" return;");
window.swin.document.write(" }");
window.swin.document.write(" window.opener.form1.inputText.value = document.form2.select.value;");
window.swin.document.write(" window.close();");
window.swin.document.write("}");
window.swin.document.write("<\/script>"); //\を付けないと表示が崩れる
window.swin.document.write("</head><body>");
window.swin.document.write("<h4>ポップアップ</h4>");
window.swin.document.write("<form name='form2'>");
window.swin.document.write("選択してください");
window.swin.document.write("<table border=1 bgcolor='#ffffff'>");
window.swin.document.write("<tr><td>");
window.swin.document.write("<input class='sizeUpRadio' type='radio' name='select' value='選択肢1'>");
window.swin.document.write("選択肢1");
window.swin.document.write("</td></tr>");
window.swin.document.write("<tr><td>");
window.swin.document.write("<input class='sizeUpRadio' type='radio' name='select' value='選択肢2'>");
window.swin.document.write("選択肢2");
window.swin.document.write("</td></tr>");
window.swin.document.write("<tr><td>");
window.swin.document.write("<input class='sizeUpRadio' type='radio' name='select' value='選択肢3'>");
window.swin.document.write("選択肢3");
window.swin.document.write("</td></tr>");
window.swin.document.write("</table>");
window.swin.document.write("<br>");
window.swin.document.write("<input class='sizeUpText' type='button' value='ＯＫ' onclick='inputText()'>");
window.swin.document.write(" <input class='sizeUpText' type='button' value='キャンセル' onclick='window.close()'>");
window.swin.document.write("</form>");
window.swin.document.write("</body></html>");
window.swin.document.close();
}

</script>
</head>

<body>
<h2>ポップアップサンプル2</h2>
<form name=form1>

ポップアップ3
<input type="text" name="inputText" size="30" value="" placeholder="ここをクリックしてください" onclick="popup3()">

</form>
</body>
</html>

以上