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

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対応部分は削除してもいいと個人的には思うんですが・・・)

// 84行目付近
// IE6 Fix($.browserが1.3からサポート外になっているので動作しない)
//var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 
var pos = (navigator.userAgent.match(/msie [6.]/i)) ? 'absolute' : 'fixed'; 

// 199行目付近
// IE6 fix(同上)
//if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();
if(navigator.userAgent.match(/msie [6.]/i)) top = top + $(window).scrollTop();

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

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

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

jqueryalert01

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

 

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

投稿ナビゲーション