前提・実現したいこと
「visual basic」などでのプログラミングは慣れているのですが、
「JavaScript」の初心者です。
大変恐縮ですが、JavaScriptで、入力画面(フォーム)を作成したいのですが、
どうしても理解が出来なく、お問合せをさせていただきました。
仕様としましては、
・ブラウザからボタン押下後、
・入力画面用のWindows画面(縦、横幅を指定したい)を表示。
・その中に、入力フィールド(3個)、コンボボックス、ラジオボタン、
チェックボックス、ボタン配置
が制御できる画面です。
もし可能でしたら、サンプルのソースコードをいただければ、
後は自分で調べますので、何卒、よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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
総合スコア216
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/05 10:42