2つのテキストボックスが付いたダイアログを表示させたい。

Question

前提・実現したいこと

JavaScriptのpromptを使用して一つのテキストボックスを表示させて、情報を取得するという事は出来たのですが、もう一つ情報を取得したいというとき、テキストボックスをもう一つ並べるという事は出来ないのでしょうか。

調べてみた結果、出来ないという情報も少し見かけたのですが、どうにかしてできないものなのか、それか一つログイン用の画面を作るしかないのか聞きたく質問させていただきました。

発生している問題・エラーメッセージ

現在の状態

↓2項目入力できるようにしたい。

該当のソースコード

<script>
    window.addEventListener("DOMContentLoaded", function () {
      while (true) {
        myPassWord = prompt("ユーザー名、パスワードを入力してください", "");
        if (myPassWord!=null) {
          if (myPassWord == "pass1") {
            break;
          } else {
            alert("ユーザー名またはパスワードが違います。");
          }
        }else{
          document.body.hidden = true;
          location = "https://google.co.jp";
          return;
        }
      }
    });
</script>

補足情報（FW/ツールのバージョンなど）

ブラウザ：Chrome

Answer 1

モーダルのライブラリ利用を検討してください
jQueryUIにもあります
ブラウザを限定できるならdialogタグでの処理もある程度までなら可能です。

Comments

[ponpon123]

モーダルのライブラリ調べれば調べるほどどれを使えばいいのか分からなくなってしまったんですが、画像のように入力項目を複数付けれるシンプルなおすすめのライブラリはありませんか；；

[yambejp]

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
$('#modal').hide();
$('#input').on('click',function(){
$('#modal').dialog({
title:"入力",
buttons:{
"OK":function() {
$(this).dialog("close");
},
"キャンセル":function() {
$(this).dialog("close");
}

},
});
});
});
</script>
<div id="modal">
user:<input type="text" name="user"><br>
password:<input type="password" name="password"><br>
</div>
<input type="button" value="入力" id="input">

[ponpon123]

$(window).ready(function () { $('#modal').hide();
$('#modal').dialog({
title:"入力",
buttons:{
"OK":function() {
$(this).dialog("close");
},
"キャンセル":function() {
$(this).dialog("close");
}

},
});
});

↑のように画面表示時にログイン、パスワード入力dialogが表示されるようにしたのですが、dialogの後ろのページを普通に操作できてしまうんですが、操作できなくしたり、ログイン処理が終わるまでページを読み込まないようにすることは可能でしょうか。

[yambejp]

dialogの引数のオブジェクトの中に
modal:true,
を指定してあげてください

[ponpon123]

ありがとうございます。後ろの画面は操作不可になりました！