[jQuery] モーダルの作り方

今回は例として新規登録のモーダルを作ります。

index.html

<!--新規登録ボタン↓-->
<div class="btn signup signup-show">新規登録はこちら</div>

<!--モーダル↓-->
<div class="signup-modal-wrapper" id="signup-modal">
    <div class="modal">
      <div id="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>
      <div id="signup-form">
        <h2>Emailで新規登録</h2>
        <form action="#">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <div id="submit-btn">新規登録</div>
        </form>
      </div>
    </div>
  </div>

script.js

//新規登録ボタンを押すとモーダルが表示される
  $('.signup-show').click(function() {
    $('#signup-modal').fadeIn();
  });

//とじるボタンを押すとモーダルが消える
  $('#close-modal').click(function() {
    $('#signup-modal').fadeOut();
  });

stylesheet.css

#signup-modal {
  display: none;
}

• モーダルをdisplay: none;で隠しておく
• 新規登録ボタンととじるボタンにclickイベントをつける
• セレクタがclassの場合->'#セレクタ名'
  セレクタがidの場合->'.セレクタ名'
• fadeIn->要素を表示させるメソッド
  fadeOut->要素を隠すメソッド