[Web作成] 通知メッセージ
Web作成で何かしら実行したときに画面中央に通知メッセージを表示する場面が必要となったため、作成してみました。
動作方法として、通知用のボタンをクリックしたら、画面中央に通知メッセージをフェードイン表示し、一定時間表示したら、表示をフェードアウト。
連続して通知メッセージを表示した場面は、最後の通知メッセージが正しくフェードイン・アウトを行うように対応しました。
仮の動作として、通知ボタンを押したら、通知ボタンの内容で通知メッセージを表示するようにしています。
動作は次の通り。
IE6などサポート切れとなった古いブラウザは動作未確認です( ̄▽ ̄;)
一応IE11とChromeにて動作確認済みです。
動作方法として、通知用のボタンをクリックしたら、画面中央に通知メッセージをフェードイン表示し、一定時間表示したら、表示をフェードアウト。
連続して通知メッセージを表示した場面は、最後の通知メッセージが正しくフェードイン・アウトを行うように対応しました。
仮の動作として、通知ボタンを押したら、通知ボタンの内容で通知メッセージを表示するようにしています。
動作は次の通り。
- 通知1
- 通知2
- 通知3
IE6などサポート切れとなった古いブラウザは動作未確認です( ̄▽ ̄;)
一応IE11とChromeにて動作確認済みです。
また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_notify_message.html (別ウィンドウ表示)
http://fjiblog.cocolog-nifty.com/html/fji_notify_message.html (別ウィンドウ表示)
| 固定リンク
「HTML・CSS・JS関連」カテゴリの記事
- [Canvas]Windowサイズに合わせてCanvasをリサイズ(2016.08.01)
- [Web作成] 通知メッセージ(2016.05.04)
- [JS] ストップウォッチ(2013.08.26)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
この記事へのコメントは終了しました。
コメント