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

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

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

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

Q&A

解決済

1回答

685閲覧

JavaScriptで入力用サブウィンドウ作成

Tikeda

総合スコア7

JavaScript

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

0グッド

0クリップ

投稿2018/06/05 09:55

前提・実現したいこと

「visual basic」などでのプログラミングは慣れているのですが、
「JavaScript」の初心者です。

大変恐縮ですが、JavaScriptで、入力画面(フォーム)を作成したいのですが、
どうしても理解が出来なく、お問合せをさせていただきました。

仕様としましては、
・ブラウザからボタン押下後、
・入力画面用のWindows画面(縦、横幅を指定したい)を表示。
・その中に、入力フィールド(3個)、コンボボックス、ラジオボタン、
チェックボックス、ボタン配置
が制御できる画面です。

もし可能でしたら、サンプルのソースコードをいただければ、
後は自分で調べますので、何卒、よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

サンプルです。
javascriptのモーダルウィンドウは単純な実装ではブラウザによって中心に表示されなかったりします、このサンプルは細かい挙動は考慮していません。
https://output.jsbin.com/sosorocosa

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="./style.css"> 9</head> 10<body> 11 <button class="open-form-button">入力画面を開く</button> 12 <div class="modal-overlay"> 13 <form class="modal-form"> 14 <p> 15 入力1 <input type="text" name="text1"> 16 </p> 17 <p> 18 入力2 <input type="text" name="text2"> 19 </p> 20 <p> 21 <select name="select1"> 22 <option value="kyuri">きゅうり</option> 23 <option value="retasu">レタス</option> 24 <option value="tomato">トマト</option> 25 </select> 26 </p> 27 <p> 28 <input type="radio" name="radio1" value="buta">29 <input type="radio" name="radio1" value="tori">鶏肉 30 </p> 31 <p> 32 <input type="checkbox" name="checkbox1">チェック 33 </p> 34 <button type="button" class="submit-button">値を表示</button> 35 <button type="button" class="close-button">閉じる</button> 36 </form> 37 </div> 38 39 <script src="./main.js"></script> 40</body> 41</html>

javascript

1 2/** @type {HTMLButtonElement} */ 3var openFormButton = document.querySelector(".open-form-button"); 4/** @type {HTMLElement} */ 5var modalOverlay = document.querySelector(".modal-overlay"); 6/** @type {HTMLFormElement} */ 7var form = document.querySelector(".modal-form"); 8var submitButton = document.querySelector(".submit-button"); 9var closeButton = document.querySelector(".close-button"); 10openFormButton.addEventListener("click", function() { 11 form.reset(); 12 modalOverlay.style.display = "block"; 13}); 14submitButton.addEventListener("click", function() { 15 var formValues = { 16 text1: form["text1"].value, 17 text2: form["text2"].value, 18 select1: form["select1"].value, 19 radio1: form["radio1"].value, 20 checkbox1: form["checkbox1"].checked, 21 }; 22 console.log(formValues); 23 alert(JSON.stringify(formValues, null, 2)); 24}); 25closeButton.addEventListener("click", function() { 26 modalOverlay.style.display = "none"; 27}); 28

css

1.modal-overlay { 2 display: none; 3 position: absolute; 4 z-index: 1; 5 top: 0; 6 left: 0; 7 background-color: rgba(0, 0, 0, 0.4); 8 width: 100%; 9 height: 100%; 10} 11 12.modal-form { 13 position: absolute; 14 z-index: 2; 15 width: 400px; 16 left: 0; 17 right: 0; 18 margin: auto; 19 top: 100px; 20 padding: 20px; 21 border: 1px solid #888; 22 background-color: white; 23}

投稿2018/06/05 10:38

sagami1991

総合スコア216

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

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

Tikeda

2018/06/05 10:42

早速の返事をいただき、ありがとうございます。 まず、サンプルを見ました。 私の希望通りだと思います。 これを元に勉強をします。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問