ALERT表示をカスタマイズできるjQuery Alertをカスタマイズしてみる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

jqueryalert_google_jqa

入力チェックや、警告表示に使うJavascriptのalertメソッドですが、ブラウザによって表示が全然違うので、そこを統一したいと考えました。
ちなみに、現在のMSIE、Firefox、Google Chrome、Operaだと以下のような表示です。

jqueryalert06

そこで、統一するために、Javascript(jQuery)とCSSを使って作ればよかったんですが、同じ用途のjQueryプラグインがあることがわかったので、そちらを試すことにしました。

ただ、既に開発は終わっているようで、公式サイトに行くと・・・・

jqueryalert03

でも、画面中程に「the archive」の文字があるので、クリックすると

jqueryalert04

 

サイトは閉鎖されていますが、プラグインは配布されているようです。

早速ダウンロードして、サイトに組み込んだのですが、Javascriptエラーがでてうまくいきません。
どうやらIE6対応している部分でエラーが発生しているようで、jquery.alerts.jsの以下の部分を変更することで動くようになりました。
(むしろ、IE6対応部分は削除してもいいと個人的には思うんですが・・・)

これで以下のようにALERT表示を統一することができました。

jqueryalert05あとは、jquery.alerts.cssを自分の好きなように変更すれば、自分好みのALERTに変更できます。

たとえば、Bootstrap対応とアイコン変更したものが以下。

jqueryalert01

アイコンファイル:Flat Icons: More Than 3600 Icons

 

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

%d人のブロガーが「いいね」をつけました。