Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

ヘルプチップの実装手順

こういうものを作るときの話です。

最初から CSS でモーダルを消すと、表示の確認と切り替えの動作が面倒になります。
そのため、このような実装には以下の手順を踏むようにします。

  1. ヘルプチップを HTML, CSS で作成
  2. HTML, CSS でモーダルを作成
  3. 閉じるボタンの動作を JS で実装
  4. ヘルプボタンの動作を JS で実装
  5. CSS でモーダルを display: none にする

ヘルプチップに限らず、アクションによって表示・非表示が切り替わるようなものは最初に JavaScript で切り替えの実装をするのではなく、最初に表示させるコンテンツを作っておこうと思います。