JavaScript モーダルダイアログボックスの利用

血液型：

呼び出し側htmlファイル

<!-- 宣言 -->
<script language="Javascript">
<!--
function onOrganizeSet(){
    var param = "resizable:no; status:no; scroll:no; dialogWidth:200px; dialogHeight:200px;";
    var result = window.showModalDialog("./js_op_modaldialog_dlg.html" ,document, param);
    if(result){
        document.form.bloodtype.value = result;
    }else{
        document.form.bloodtype.value = "";
    }
}
//-->
</script>

<!-- 呼び出し -->
<form name="form">
<input type="button" value="一覧から選択" onClick="onOrganizeSet();">
<input type="text" name="bloodtype">
</form>

ダイアログhtmlファイル（ここではjs_op_modaldialog_dlg.html）

<!-- 宣言 -->
<script language="Javascript">
<!--
function onChoice(value){
    if(value == null){
        window.returnValue = false;
    }else{
        window.returnValue = value;
    }
    window.close();
}
//-->
</script>

<!-- 呼び出し -->
<form>
<input type="button" value="A"
    onClick="onChoice(this.value)"></a><br>
<input type="button" value="B"
    onClick="onChoice(this.value)"></a><br>
<input type="button" value="O"
    onClick="onChoice(this.value)"></a><br>
<input type="button" value="AB"
    onClick="onChoice(this.value)"></a>
</form>

まず、呼び出しWindow内でwindow.showModalDialog()メソッドを実行すると、指定したパラメータに基づいてダイアログが表示されます。
このダイアログはモーダルダイアログなので、閉じるまで呼び出し側のWindow操作を行うことができなくなります。
ダイアログ側から値を戻すために、window.returnValueに値を設定します。これで、呼び出し側で任意の値を受け取ることができます。