Help us understand the problem. What is going on with this article?

【初心者】jQuery 読み込み/モーダル【備忘録18】

11/20~22に勉強したこと

jQueryの読み込み

jQueryを使用する場合は、HTMLにjQueryライブラリを読み込む必要がある。
【HTML】

<head>
 <script src="https:.....(ファイルのURL)..."></script>
</head>

<body>
.....
 <script src="script.js"></script>
</body>

上部をHTMLに書き込んでからjQueryのシートで準備⇒書いていく。

$(function(){
  //この中に書いていく。

});

【気を付けること】
HTMLに書く際、</body>の直前に書くことで表示速度が速くなる。

モーダル

指定した箇所をクリックすると、モーダルの表示/非表示が行われる。

まずログインモーダル

1:まずHTMLで書いたモーダルをCSSで非表示にする。

.login-modal-wrapper{
 display:none;
}

2:ログインボタンにclickイベントを設定し、どのように表示するか書く。

$('#login-show').click(function(){
 $('#login-modal').fadeIn();
});
新規登録モーダル

1:ページに二箇所、新規登録のボタンがある場合class名を指定(idは複数×のため)

... <div class="btn signup signup-show">
... <div class="btn message signup-show">

2:クリックした時の動作指定

$('.signup-show').click(function(){
  $('#signup-modal').fadeIn();
});

【気を付けること】
今まで書いてきて、#signupだったり.signupと書く際に
「#」「.」が抜けることが多々あったので気を付けたい。

追加で知ったこと

CSSを書く際、複数のセレクタを適用する場合は「,」で区切ることができる。

モーダルを閉じる

閉じるボタンにclickイベントを設定してからfadeOut指定

$('.close-modal').click(function(){
  $('#login-modal').fadeOut();
  //ここにもうひとつ要素足す場合「,」などは不要!
});

クリックイベントを指定するクラス名は「ログイン」も「新規会員登録」も
共通にしておくこと!(※上記だと「close-modal」)

charlie19919425
営業会社から転職のためにプログラミング勉強中。(Progate使用) 独学なので、不足部分あれば遠慮なく指摘ください!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした