JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSを使ってJavaScriptのアラートボックスをカスタマイズする方法

JavaScript標準のalert()メソッドで表示されるアラートボックスは、ブラウザが提供するネイティブなダイアログのため、CSSでスタイルを適用することができません。デザイン性の高いアラートボックスを実現したい場合は、独自のカスタムアラートボックスを作成する必要があります。

カスタムアラートボックスはjQueryを使って簡単に実装でき、見た目はCSSで自由にデザインできます。以下では、その具体的な手順とサンプルコードを紹介します。

カスタムアラートボックスの作り方

基本的な流れは次のとおりです。

  • HTMLでダイアログ用の<div>要素（メッセージ部分とOKボタン）を用意する
  • CSSで非表示状態（display: none;）にしておき、位置や配色、角丸などをデザインする
  • jQueryでメッセージの差し替えとボタンのクリック処理を制御する

サンプルコード

以下のコードを実行すると、クリックしたときにカスタムデザインのアラートボックスが表示されます。ぜひ動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         function functionAlert(msg, myYes) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes").unbind().click(function() {
               confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            confirmBox.show();
         }
      </script>
      <style>
         #confirm {
            display: none;
            background-color: #F3F5F6;
            color: #000000;
            border: 1px solid #aaa;
            position: fixed;
            width: 300px;
            height: 100px;
            left: 40%;
            top: 40%;
            box-sizing: border-box;
            text-align: center;
         }
         #confirm button {
            background-color: #FFFFFF;
            display: inline-block;
            border-radius: 12px;
            border: 4px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 60px;
            cursor: pointer;
         }
         #confirm .message {
            text-align: left;
         }
      </style>
   </head>
   <body>
      <div id="confirm">
         <div class="message">This is a warning message.</div><br>
         <button class="yes">OK</button>
      </div>
      <input type="button" value="Click Me" onclick="functionAlert();" />
   </body>
</html>

コードのポイント解説

このサンプルの仕組みを簡単に説明します。

  • #confirmスタイル： position: fixed;で画面上に固定表示し、leftとtopで表示位置を調整しています。初期状態はdisplay: none;で隠れています。
  • functionAlert関数： 引数msgで渡されたテキストを.message要素に設定し、OKボタンがクリックされるとダイアログを非表示にします。オプションでmyYesにコールバック関数を渡せば、OK押下時の追加処理も実行可能です。
  • unbind()の活用： ボタンに複数回イベントが登録されるのを防ぐため、クリックイベントをバインドし直す前にunbind()で既存のイベントを解除しています。

この手法を使えば、背景色・フォント・角丸・影など、あらゆるスタイルを自由に適用したアラートボックスを作成できます。プロジェクトのデザインに合わせて、CSSの値を好みに変更してみてください。

  1. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini