モーダルの作成

モーダルとはクリックイベントなどに基づいて、小さな小窓の画面を表示させたり、非表示にさせるイベント

 

モーダルの表示と非表示はそれぞれ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();

  });