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

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

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

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

Q&A

3回答

958閲覧

jsの入力フォームについて

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

1クリップ

投稿2018/10/07 14:40

編集2022/01/12 10:55

前提・実現したいこと
jsの入力フォームの確認をモーダルを使って作りたいです。
jqueryを使わないで記述したいです。
jsの記述がわかりません。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div align="center"> <p>入力フォーム</p> <br> メールアドレス<input type="text"> @<input type="text"> <br> <br> <input type="button" value="登録" onclick="check()"> </div> <div id="modal-content"> <p>このメールアドレスで登録します</p> <p><a id="modal-close" class="button-link">キャンセル</a></p> <p><a id="modal-close" class="button-link">OK</a></p> <script> function check(){ } </script> </body> </html>

試したこと
調べるとjqueryは出てくるのですがjavascriptでモーダルを表示するサイトが少なく、
jqueryの学習をしていない為理解ができません。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/10/07 16:56

「入力フォームの確認」この部分の仕様を明確にしましょう。モーダルの表示部分だけの回答で良い場合は不要です。
m.ts10806

2018/10/07 20:45

現在のコードはそもそもどのようにして作られたのでしょうか。参考にした記事などあれば提示してください。あとモーダルについて聞きたいのであればタイトルがこれだと色々な解釈ができます。要件にもう少し寄せてください。
m.ts10806

2018/10/16 21:08

締め方間違ってますよ。これではただの逃亡です
guest

回答3

0

dialog要素があります。

HTML

1<dialog id="modal-content"> 2 <form method="dialog"> 3 <p>このメールアドレスで登録します</p> 4 <div> 5 <button type="submit" class="button-link" id="modal-cancel" value="">キャンセル</button> 6 <button type="submit" class="button-link" id="modal-ok" value="ok">OK</button> 7 </div> 8 </form> 9</dialog>

JavaScript

1const modal = document.getElementById('modal-content'); 2 3function check() { 4 modal.showModal(); 5} 6 7modal.addEventListener('close', function(event) { 8 if (this.returnValue === 'ok') { 9 console.log('ok'); 10 } 11});

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

https://demo.agektmr.com/dialog/
https://coliss.com/articles/build-websites/operation/work/how-to-use-dialog-element.html

投稿2018/10/09 04:32

x_x

総合スコア13749

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

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

0

CSSも使ったものですが、こんな感じでは駄目でしょうか?
https://www.w3schools.com/howto/howto_css_modals.asp

投稿2018/10/07 15:58

wwbQzhMkhhgEmhU

総合スコア343

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

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

0

こんばんは!

参考程度に^_^
javascript モーダルウィンドウの作り方

投稿2018/10/07 17:57

haruniku

総合スコア527

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問