Javascript (カレンダー004_機能検討)

■カレンダーの入力、表示を検討する。

前回で、デザインはある程度ととのえたので、機能について検討してみる。
本に記載されたサンプルの機能は、次のとおりになっていた。
・カレンダー本体の下にあるテキスト、テキストエリアに文字を入力し、保存ボタンで文字を保存できる。
・保存場所は、localStorageなるもの。
・カレンダーの日付をクリックすると、テキスト、テキストエリアに保存した文字が表示される。
画面上はこんな表示。

これに対して、作成イメージで考えたものは、次のもの。
・日付をクリックすると、登録画面がポップアップして文字を入力、保存できる。
・日付にカーソルを合わせると、登録した内容がポップアップして保存した文字が表示される。
基本的なロジックは流用するつもりだけど、カレンダーの下にあるものを削除してさっぱりさせたい。

ポップアップなどの語でWeb検索してみると、window.promptという機能があったので、これが使えないか見てみる。
入力した文字をlocalStorageに保存していくことができたので、テキスト、テキストエリアの代わりにこちらのポップアップウインドウからの入力に切り替えることはできそう。ためしに作ってみると下のような画面となった。（ちなみに、表示もwindow.alertを使えば、同様のポップアップウインドウ上に表示することができた。）

テキスト部分をなくしたので多少さっぱりしたけど、ポップアップウインドウの表示される感じがイメージと違う。調べてみると、こういうポップアップウインドウは、モーダルウインドウという名前でjQueryでいろいろ用意されているそう。
どんなものがあるかjQueryのほうを少し見てみようか。