2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

モーダルウィンドウ表示

Posted at

前回の続きです。
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です!

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?