« [マクドナルド]ハッピーセット『スーパーマリオ』 | トップページ | [Canvas]Windowサイズに合わせてCanvasをリサイズ »

2016年5月 4日 (水)

[Web作成] 通知メッセージ

Web作成で何かしら実行したときに画面中央に通知メッセージを表示する場面が必要となったため、作成してみました。

動作方法として、通知用のボタンをクリックしたら、画面中央に通知メッセージをフェードイン表示し、一定時間表示したら、表示をフェードアウト。

連続して通知メッセージを表示した場面は、最後の通知メッセージが正しくフェードイン・アウトを行うように対応しました。

仮の動作として、通知ボタンを押したら、通知ボタンの内容で通知メッセージを表示するようにしています。

動作は次の通り。

  • 通知1
  • 通知2
  • 通知3


IE6などサポート切れとなった古いブラウザは動作未確認です( ̄▽ ̄;)
一応IE11とChromeにて動作確認済みです。

また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_notify_message.html (別ウィンドウ表示)

|

« [マクドナルド]ハッピーセット『スーパーマリオ』 | トップページ | [Canvas]Windowサイズに合わせてCanvasをリサイズ »

HTML・CSS・JS関連」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: [Web作成] 通知メッセージ:

« [マクドナルド]ハッピーセット『スーパーマリオ』 | トップページ | [Canvas]Windowサイズに合わせてCanvasをリサイズ »