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＞の直前に書くことで表示速度が速くなる。
モーダル
指定した箇所をクリックすると、モーダルの表示／非表示が行われる。
まずログインモーダル
１：まずHTMLで書いたモーダルをCSSで非表示にする。
.login-modal-wrapper{
display:none;
}
２：ログインボタンにclickイベントを設定し、どのように表示するか書く。
$('#login-show').click(function(){
$('#login-modal').fadeIn();
});
新規登録モーダル
１：ページに二箇所、新規登録のボタンがある場合class名を指定(idは複数×のため)
... <div class="btn signup signup-show">
... <div class="btn message signup-show">
２：クリックした時の動作指定
$('.signup-show').click(function(){
$('#signup-modal').fadeIn();
});
【気を付けること】
今まで書いてきて、#signupだったり.signupと書く際に
「#」「.」が抜けることが多々あったので気を付けたい。
追加で知ったこと
CSSを書く際、複数のセレクタを適用する場合は「,」で区切ることができる。
モーダルを閉じる
閉じるボタンにclickイベントを設定してからfadeOut指定
$('.close-modal').click(function(){
$('#login-modal').fadeOut();
//ここにもうひとつ要素足す場合「,」などは不要！
});
クリックイベントを指定するクラス名は「ログイン」も「新規会員登録」も
共通にしておくこと！（※上記だと「close-modal」）