アラート画面のデザインを自由にカスタマイズ！警告表示のダイアログの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': {
           
           'action': function() {
              /* OKボタンの処理を記述 */
              
              // ダイアログを閉じる
              return false;
           }
         },
         'キャンセル': {
           
           'action': function() {
              /* キャンセルボタンの処理を記述 */
              
              // ダイアログを閉じる
              return false;
           }
         }
      }
   });
 });
});
</script>

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