スポンサードリンク


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

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

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

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

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

 

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

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

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

 

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

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

jQuery アラート画面 デザイン

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

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

 

スポンサードリンク

 

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

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

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

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

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

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

美しいダイアログ画面

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

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

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

スポンサードリンク


コメントを残す




*

このページの先頭へ