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

JavaScriptで確認ダイアログのボタンラベルを変更する方法【jQuery＋CSS】

JavaScriptの標準機能であるconfirm()メソッドは手軽に使える一方で、ボタンのラベルはブラウザ側で固定されており、「OK」や「キャンセル」以外のテキストに変更することはできません。


ボタンのラベルを自由にカスタマイズしたい場合は、jQueryとCSSを組み合わせて独自の確認ダイアログを作成するのが効果的です。以下のコードは、標準の確認ボックスとは異なるボタンラベルを持つ確認ダイアログを実装した例です。


サンプルコード

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            function functionConfirm(msg, myYes, myNo)
            {
                var confirmBox = $("#confirm");
                confirmBox.find(".message").text(msg);
                confirmBox.find(".yes,.no").unbind().click(function()
                {
                    confirmBox.hide();
                });
                confirmBox.find(".yes").click(myYes);
                confirmBox.find(".no").click(myNo);
                confirmBox.show();
            }
        </script>
        <style>
            #confirm
            {
                display: none;
                background-color: #91FF00;
                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: 100px;
                cursor: pointer;
            }
            #confirm .message
            {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <div id="confirm">
            <div class="message"></div>
            <button class="yes">はい！</button>
            <button class="no">いいえ、クリケットが好き！</button>
        </div>
        <button onclick='functionConfirm("サッカーは好きですか？", function yes()
        {
            alert("はい")
        }, function no()
        {
            alert("いいえ")
        });'>送信</button>
    </body>
</html>

コードの解説

  • functionConfirm()関数：表示するメッセージと、「はい」「いいえ」各ボタンがクリックされたときに実行するコールバック関数を引数として受け取ります。
  • unbind()によるイベント解除：ダイアログを表示するたびに古いクリックイベントを解除するため、イベントが重複して複数回実行されるのを防ぎます。
  • CSSによるカスタムデザイン：#confirmにposition: fixedを指定して画面中央に固定表示しており、ボタンの色や角丸なども自由にデザインできます。

この方法を使えば、ボタンのラベルだけでなく、ダイアログ全体の見た目や動作も思い通りに制御できます。プロジェクトのデザインに合わせて、配色やサイズ、アニメーション効果などを追加してみてください。

  1. 【Swift入門】iOSアプリでボタン（UIButton）の背景色を変更する2つの方法

    iOSアプリでボタンの背景色を変更したい場合、UIButtonが持つbackgroundColorプロパティにアクセスします。変更方法は主に2つあり、ひとつはストーリーボード上で設定する方法、もうひとつはプログラム（コード）から設定する方法です。それぞれの手順を詳しく見ていきましょう。方法1：ストーリーボードエディタで設定するもっとも手軽なのは、ストーリーボードから視覚的に設定する方法です。手順：ストーリーボード上にボタンを配置します。ボタンを選択した状態で、右側のユーティリティエリアからアトリビュートインスペクタを開きます。「Background」プロパティを探し、カラーパレットから好きな色

  2. 【Python】ボタンクリックでTkinterラベルのテキストを動的に変更する方法

    TkinterのLabelウィジェットは、アプリケーション内でテキストや画像を表示するために最もよく使われるウィジェットの一つです。ラベルのテキストプロパティや文字色、背景色・前景色などは、config(**options)メソッドを使って自由に設定できます。また、実行中にラベルの内容を動的に変更したい場合は、ボタンと関数を組み合わせることで、クリック操作に応じてラベルのテキストを更新することが可能です。サンプルコード# 必要なライブラリをインポート from tkinter import * # tkinterフレーム（ウィンドウ）のインスタンスを作成 win = Tk() # ウィンド