質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

568閲覧

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

ponpon123

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/04/15 04:48

前提・実現したいこと

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

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

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

現在の状態
イメージ説明
↓2項目入力できるようにしたい。
イメージ説明

該当のソースコード

JavaScript

1<script> 2 window.addEventListener("DOMContentLoaded", function () { 3 while (true) { 4 myPassWord = prompt("ユーザー名、パスワードを入力してください", ""); 5 if (myPassWord!=null) { 6 if (myPassWord == "pass1") { 7 break; 8 } else { 9 alert("ユーザー名またはパスワードが違います。"); 10 } 11 }else{ 12 document.body.hidden = true; 13 location = "https://google.co.jp"; 14 return; 15 } 16 } 17 }); 18</script>

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

ブラウザ:Chrome

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2021/04/15 04:59

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ponpon123

2021/04/15 05:11

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

2021/04/15 05:19

<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

2021/04/15 05:42

$(window).ready(function () { $('#modal').hide(); $('#modal').dialog({ title:"入力", buttons:{ "OK":function() { $(this).dialog("close"); }, "キャンセル":function() { $(this).dialog("close"); } }, }); }); ↑のように画面表示時にログイン、パスワード入力dialogが表示されるようにしたのですが、dialogの後ろのページを普通に操作できてしまうんですが、操作できなくしたり、ログイン処理が終わるまでページを読み込まないようにすることは可能でしょうか。
yambejp

2021/04/15 06:12

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

2021/04/15 06:18

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問