アラート画面のデザインを自由にカスタマイズ！警告表示のダイアログのUI機能をjQueryプラグインConfirmで印象をガラッと変更する方法！

トップ
プログラミング
jQuery
アラート画面のデザインを自由にカスタマイズ！警告表示のダイアログのUI機能をjQueryプラグインConfirmで印象をガラッと変更する方法！

スポンサードリンク

アラート画面のデザインを自由にカスタマイズ！警告表示のダイアログのUI機能をjQueryプラグインConfirmで印象をガラッと変更する方法！

2015年04月18日 [jQuery]

Javascriptのアラートダイアログってありますよね。
ウェブページを開いたときに表示される警告表示のウィンドウです。

window.alert(“文字”);と入力すると、
簡単に警告のポップアップウィンドウを表示させることができます。

正直言ってあのウィンドウってデザインも素朴ですし味気ないです。

そこでjQueryを利用してこのアラートダイアログをちょっとだけ
スタイリッシュな印象に変えてしまうというのが、今回の趣旨です。

jQueryプラグインのConfirmを利用する

スタイリッシュなアラート画面を実装するためにjQueryのプラグインを利用します。
今回使用するのがConfirmというアラート画面実装用のプログラムです。

まずはこちらからConfirmのプログラムをダウンロードして下さい。

jQuery.confirmプログラムの使い方

ダウンロードしたzipファイルを解凍すると、以下のようにフォルダとファイルが一覧であります。

「jquery.confirm」というフォルダがあります。
フォルダには画像や、CSS、JSファイルなど入っています。

このフォルダを一式利用してアラート画面を実装することができます。

スタイリッシュなダイアログ画面を表示させよう

まずは、アラート画面を実装したい場所にCSSとJSファイルを読み込ませます。

<script type="text/javascript" src="./jquery.confirm/jquery.confirm..js" charset="utf-8"></script>
<link rel="stylesheet" href="./jquery.confirm/jquery.confirm.css" type="text/css" />

1 2	<script type="text/javascript" src="./jquery.confirm/jquery.confirm..js" charset="utf-8"></script> <link rel="stylesheet" href="./jquery.confirm/jquery.confirm.css" type="text/css" />

ファイルのパスは配置した各種ファイルの場所を指定して下さいね。

続いて、アラート画面のソースコードを実装していきます。

<script type="text/javascript">
$(function(){
  $("#alertButton").click(function(){
    $.confirm({
      'title'     : 'タイトル',
      'message'   : 'ここにメッセージを表示します。',
      'buttons'   : {
         'OK': function() {
           //OKボタンの処理
           $(this).dialog('close');
         },
         'キャンセル': function() {
           //キャンセルボタンの処理
           $(this).dialog('close');
         }
      }
   });
 });
});
</script>

$(function(){

$("#alertButton").click(function(){

$.confirm({

'title' : 'タイトル',

'message' : 'ここにメッセージを表示します。',

'buttons' : {

'OK': function() {

//OKボタンの処理

$(this).dialog('close');

'キャンセル': function() {

//キャンセルボタンの処理

$(this).dialog('close');

}

});

</script>

<input type="button" id="alertButton" value="アラート画面を表示" />

1	<input type="button" id="alertButton" value="アラート画面を表示" />

このコードを記述すれば、ボタンクリックでアラート画面が表示されます。

表示されるダイアログのデザインは以下のようになります。

上のようなスタイリッシュでクールなデザインのダイアログが画面中央に表示されます。

OKボタンとキャンセルボタンにそれぞれクリックした時のプログラムの動作を付加させることもできます。
あとはCSSや画像を差し替えれば、様々なデザインに切り替えることもできるので便利ですよ。

この記事を書いた人
最新の記事

よっき

パソコンが大好きな青年。職業はプログラマ。幼少期からパソコンが好きで、趣味がそのまま仕事になりました。主にウェブ系コンテンツの開発が中心です。自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。自作PC専門ブログで、お得な情報を紹介しています。趣味はホームページ制作かな。起業を夢見て奮闘中の毎日！