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

JavaScriptのアラートボタンのスタイルを変更する方法｜カスタムalertボックスの作り方

標準のalert()はスタイル変更できない？

ブラウザ標準の alert() メソッドで表示されるダイアログは、OSやブラウザ自身が描画しているため、CSSでデザインを変更することができません。

そのため、見た目を自由にカスタマイズしたい場合は、HTML・CSS・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: #000000;
            color: #FCD116;
            border: 1px solid #aaa;
            position: fixed;
            width: 250px;
            left: 50%;
            margin-left: -100px;
            padding: 6px 8px 8px;
            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>
         <button class = "yes">OK</button>
      </div>
      <input type="button" value="Click Me" onclick="functionAlert();" />
   </body>
</html>

コードのポイント解説

1. 表示・非表示はjQueryで制御

functionAlert() 関数では、#confirm 要素内の .message に引数で渡されたメッセージを設定し、.yes ボタンがクリックされたタイミングで confirmBox.hide() を呼び出してダイアログを閉じています。unbind() で一度イベントを解除してから再登録することで、呼び出しが重複してもイベントが二重発火しないようになっている点もポイントです。

2. CSSでデザインを自由にカスタマイズ可能

#confirm セレクターでは、背景色（background-color）、文字色、枠線、幅などのスタイルを指定しています。position: fixed; と left: 50%; を組み合わせることで、画面中央付近に固定表示されます。また、ボタンには border-radius: 12px; を指定することで角丸のデザインにしています。

3. 通常のアラートと同じ感覚で呼び出せる

onclick="functionAlert();" のようにボタンクリック時に呼び出すだけでカスタムダイアログが表示されます。第1引数に表示したいメッセージ、第2引数にOKボタン押下時のコールバック関数を渡せる、汎用的な作りになっています。

まとめ

標準の alert() はCSSでの装飾ができませんが、HTML・CSS・jQueryで自作のダイアログを用意すれば、サイトのデザインに合わせたアラートを自由に作成できます。上記のコードをベースに、配色やサイズの変更、フェードインなどのアニメーション追加にもぜひ挑戦してみてください。

  1. 【JavaScript】入力フィールドに文字が入力されたらボタンの色を変更する方法

    Webフォームを作成していると、「テキスト入力欄に何かが入力されたら、ボタンの色を変えてユーザーに視覚的なフィードバックを与えたい」というケースはよくあります。本記事では、JavaScriptのonkeyupイベントとgetElementByIdを使って、この動作をシンプルに実装する方法を解説します。 実装のポイント 今回の仕組みは非常にシンプルです。入力フィールドにonkeyupイベントを設定し、キーが押されるたびに入力値をチェックします。値が空でなければボタンの背景色を緑に、空なら元の水色に戻すという処理を行います。 1. ボタンの準備 まず、色を変更対象となるボタンを用意します。初期状態

  2. Java SwingでJButtonのテキストを動的に変更する方法

    JButtonはAbstractButtonのサブクラスであり、Java Swingアプリケーションにプラットフォームに依存しないボタンを追加するために使用されるコンポーネントです。ユーザーがボタンをクリックするとActionListenerインターフェースが発生し、さらにMouseListenerやKeyListenerといったインターフェースにも対応しています。 デフォルトではテキスト付きのJButtonを作成できます。テキストフィールドに任意の文字列を入力してボタンをクリックすると、ActionListenerインターフェースのactionPerformed()メソッドが呼び出され、JB