モーダルの作成
モーダルとはクリックイベントなどに基づいて、小さな小窓の画面を表示させたり、非表示にさせるイベント
モーダルの表示と非表示はそれぞれfadeIn()、fadeOut()を使う
モーダルを作成する流れ(IDを指定する)
①モーダルで表示させたい部分をHTMLで作成する
②モーダルをCSSで非表示に指定する
CSSファイル
.login-modal{
display: none
}
JSファイル
③クリックイベントを作成し、その中でモーダルを表示させる
$(function() {
$("#login-show").click(function(){
$("#login-modal").fadeIn();
});
});
※2箇所に同じモーダルを作成する流れ(クラス名をクリックイベントで指定する)
①モーダル部分をHTMLに作成する
②同じモーダルを2箇所以上に指定したいときは同じクラス名を記述する
③クリックイベントでモーダルを表示させる
モーダルを隠す
閉じるボタンを押した時に消す仕様が一般的
①閉じるボタンにクリックイベントを作成して、その中でモーダルを消す
2つ同時にモーダルを消したい場合
※消すという動作はログインのモーダルでも新規登録用のモーダルでも同じなので、閉じるボタンには同じクラス名を使って、
その中にそれぞれの表示ボタンのIDを指定してfadeOutで消すようにするといい
$(function() {
//モーダル①と②を消す
$('.close-modal').click(function() {
$('#login-modal').fadeOut();
$('#signup-modal').fadeOut();
});