通常、jQuery メソッドの［alert()］で表示される警告ウィンドウにはスタイルシートが適応されないため、デザインを施すことが不可能ですが、今回紹介する jQuery スクリプト［SweetAlert］を利用するとオシャレな感じにカスタマイズすることができます。

サンプルは以下。

Sweet Alert：サンプル・デモ

普通に警告ウィンドウを表示させるよりも遥かに洗練されています。

導入方法も簡単ですが、jQuery に依存しているため、残念ながら単体では動きません。
まずは［SweetAlert］の配布サイトと、［jQuery］本家サイトより、必要なファイルをダウンロードしてきましょう。

SweetAlert 公式サイト：http://t4t5.github.io/sweetalert/
jQuery 本家サイト：http://jquery.com

使用するのは［jquery.js］と［sweet-alert.js］の２つのファイルです。
これらを <head>〜</head> 内で読み込みます。

<script src="jquery.js"></script>
<script src="sweet-alert.js"></script>

続いて HTML の記述方法。
［SweetAlert］を適応させたいボタンに任意のクラス名（例えば「class="sample"」等）を与え、対応する設定項目を指定していきます。

以下は設定の例。

<script>
$('.sample').click(function(){
	swal({
	title: "アラートです！",
	text: "メッセージがココに入ります",
        confirmButtonText: '了解！',
        confirmButtonColor: '#DD6B55'
	});
});
</script>

オプションもいくつか用意されており、デザインは自由にカスタマイズすることが可能です。

  • title
  • text
  • type
  • allowOutsideClick
  • showCancelButton
  • confirmButtonText
  • confirmButtonColor
  • cancelButtonText
  • imageUrl
  • imageSize

警告ウィンドウを表示する alert() 関数は、エラーやメッセージを伝える手段として非常に便利です。しかしデフォルトのままだとビジュアル的に素っ気ないので、［SweetAlert］を利用して細部までこだわりのあるサイトを構築してみてはいかがでしょうか。