モーダルウィンドウ表示

3380 ワード
JavaScript ポートフォリオ PHP jQuery 初心者 PHP テキストリンク

前回の続きです。
PHPでログイン機能：https://qiita.com/x49_n/items/07b80a1e88c483f7256a

予定入力欄作成

予定を入れたい日を選択すると、モーダルウィンドウが表示され予定を記入できるようにしたい。
前回作成したカレンダーのクリックイベント（jQuery）に追加します。

cal_script.js
$(function() {
  $("td").on("click", function() {
  //  選択部分の色変更
    $("td").removeClass("select");
    $(this).addClass("select");
  //  tdの値(日にち)を取得し出力
    $("#select_day").text($(this).text());
  //  スケジュール記入欄表示
    $('#plan-modal').fadeIn();
  });
  // 閉じるボタン
  $('.close-modal').on("click", function() {
    $('#plan-modal').fadeOut();
  });
  });

動作確認問題なしッッ！！
入力した内容もDBに登録されていたのでOKです！


流れをGIF画像で作成してみました！
GIF画像を初めて作成しましたが簡単でしたね。