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

【初心者向け】JavaScriptとjQueryでアラートメッセージの文字色を変更する方法

ブラウザ標準の alert() メソッドで表示されるダイアログは、OSやブラウザが描画するネイティブなウィンドウのため、CSSでテキストの色を直接変更することができません。アラートメッセージの文字色を自由にデザインしたい場合は、独自のカスタムアラートボックスを作成する必要があります。

この記事では、JavaScriptライブラリのjQueryを使ってカスタムアラートボックスを実装し、メッセージのテキストカラーを「#FCD116」(明るい黄色)に変更する方法を解説します。

実装例：カスタムアラートボックスで文字色を変更する

以下のサンプルコードでは、「Click Me」ボタンをクリックするとカスタムアラートが表示され、メッセージ部分が指定した色で表示されます。

<!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: #514E61;
            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: #48E5DA;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 80px;
            cursor: pointer;
        }
        #confirm .message {
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="confirm">
        <div class="message">これは警告メッセージです。</div>
        <button class="yes">OK</button>
    </div>
    <input type="button" value="クリックしてね" onclick="functionAlert();" />
</body>
</html>

コードのポイント

  • CSSでの色指定: #confirm セレクタ内の color: #FCD116; によって、アラートメッセージ全体のテキストカラーが黄色に設定されます。好きな色に変更したい場合は、この値を書き換えるだけです。
  • 表示・非表示の制御: 初期状態では display: none; でボックスを隠しておき、functionAlert() 関数内の confirmBox.show() を呼び出すことで表示します。
  • OKボタンの処理: 「OK」ボタンがクリックされると confirmBox.hide() が実行され、アラートボックスが閉じられます。unbind() を使うことで、イベントハンドラの重複登録を防いでいます。
  • 背景色との組み合わせ: 背景色は #514E61(暗い紫グレー)に設定しており、黄色の文字とのコントラストで視認性を高めています。

このように、標準の alert() ではなくHTMLとCSSで構成されたオリジナルのダイアログを作れば、文字色だけでなくフォントサイズ、配置、アニメーションなども自由にカスタマイズできます。デザイン性の高いWebサイトを構築する際には、ぜひ活用してみてください。

  1. JavaScriptで大きなフォントのテキストを作成する方法【big()メソッドの使い方と注意点】

    JavaScriptのbig()メソッドとはJavaScriptで大きなフォントのテキストを作成するには、文字列オブジェクトのbig()メソッドを使用します。このメソッドを呼び出すと、対象の文字列が<big>タグで囲まれた場合と同じように、ひと回り大きいフォントで表示されます。具体的には、str.big()を実行すると、内部的に次のようなHTMLが生成されます。<big>Demo Text</big>big()メソッドの基本的な使い方以下は、big()メソッドを使って大きなテキストを画面に表示するサンプルコードです。<html>   &

  2. JavaScriptにデバッグコードを追加する方法：alert()とdocument.write()を使った簡単なデバッグ手法

    JavaScriptにデバッグコードを追加する基本 JavaScriptでプログラムの動作を確認したい場合、最も手軽な方法は alert() や document.write() といったメソッドを利用することです。これらのメソッドを使えば、変数の中身や処理の進行状況を簡単に画面上でチェックできます。 alert()を使ったデバッグ例 以下は、alert() を使って関数の呼び出し前後で変数の値を出力する、シンプルなデバッグコードの例です。 var debugging = true; var whichImage = widget; if( debugging ) alert( Call