【jQuery】モーダルの作り方

モーダルの作り方

モーダルとはclickイベントなどに基づいて、表示/非表示が行われる要素のこと

手順

1. CSSで非表示にしておく（display:none）
2. ボタンにClickイベントを設定
3. Click後に表示されるようにする（fadeIn）

$(function() {
  
  $('#login-show').click(function() { //Clickインベントの設定
    
    $('#login-modal').fadeIn(); //フェードインする
    
  });
  
});

モーダルの表示・非表示

挙動

• ボタンを押してモーダルを表示させる
• ✖ボタンでモーダルを非表示にする

$(function(){
  
  //クリックイベント
  $('.signup-show').click(function(){
    //モーダルがフェードインする
    $('#signup-modal').fadeIn();
  });
  
  //×ボタンでクローズさせる
  $('#close-modal').click(function(){
    //モーダルがフェードアウトする
    $('#signup-modal').fadeOut();
  });

});