スポンサードリンク


アラート画面のデザインを自由にカスタマイズ!警告表示のダイアログの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.
      よっき プロフィール画像
      パソコンが大好きな青年。職業はプログラマ/SE。 フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。

      スポンサードリンク


      コメントを残す




      CAPTCHA


      このページの先頭へ