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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

913閲覧

jQueryでモーダルを作りたい

kato00

総合スコア71

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/26 05:14

ホームページ上にあるログインボタンを押すとユーザー名とパスワードの入力用のモーダルが表示されるようにコードを書きました。

html css jQueryで下記コードを記述したところ、ホームページには
一瞬モーダルが表示されるのですが、0.5秒位で消えてしまいます。

下記コードです。

html

<div id="loginFormModal"> <p> ユーザー名 </p> <form action="###" method="post"> <input type="text" name="userName" id="login" placeholder="ユーザー名"> <p> パスワード </p> <input type="text" name="password" id="login" placeholder="パスワード"> </form> </div>

css

(#)login{
background-color: rgb(236, 245, 137);
padding: 5px;
border-radius: 5px;
}

/モーダル/
(#)loginFormModal{
margin: 100px auto;
height: 150px;
width: 150px;
background-color: rgb(208, 213, 218);
border-radius: 5px;
display: none;
}

jQuery
$(function() {
$('#login').click(function(){
$('#loginFormModal').fadeIn();
}
)
});

注:#を入力するとテラテイル上で意図しないプレビューになったので仮に(#)を記載しましたが、コードは普通に#で記述しています。

モーダルが0.5秒位で消えてしまうので、ずっと表示させて置きたいのですが、
原因と解決策はどのようになりますでしょうか?

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

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

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

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

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

yambejp

2018/02/26 05:17

「#を入力するとテラテイル上で意図しないプレビュー」・・・「```」でソースを囲えば適宜フォーマットして表示できます
kato00

2018/02/26 05:19

そうなんですか!ありがとうございます!!
x_x

2018/02/26 07:21

idの重複を解消したうえで、再現するコードをのせてもらえるでしょうか?
kei344

2018/02/26 10:54

teratailは質問内容の編集ができるので、質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

放置のようなので一応状況だけ

  • すでに別の方の指摘がありますがidはページ内でユニークに設定しないといけません

(id=loginが複数あります)

  • id=loginFormModalのdivの中にid=loginのinputタグがあるのに

id=loginをくりっくしてid=loginFormModalをフェードインするというのは
合理的ではありません。

結果としてモーダルを使えるような状態になっていないということです

投稿2018/03/05 02:31

yambejp

総合スコア114585

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問