jQuery UI ダイアログの色をカスタマイズする方法（jQuery）：技術空間

2016/4 作成

jQuery UI ダイアログの色をカスタマイズする方法

jQuery UIのダイアログのタイトルバー、ボタン、文字の色などを変更したい場合、スタイルシートを以下のように上書き定義すればよい。（やり方はいろいろありそう）

タイトルバー

.ui-dialog-titlebar {
    color:white;
    background:blue;
}

ボタンの色

.ui-widget-content .ui-state-default{
    color:white;
    background:blue;
}

ボタンはホーバー時（マウスカーソルが対象物と重なった時）の色も変更できる。

ボタンの色（ホーバー時）

.ui-widget-content .ui-state-hover{
    color:black;
    background:yellow;
}

色変更後。

サンプルプログラム

サンプル（抜粋）

<style>
<!--
.ui-dialog-titlebar {
    color:white;
    background:blue;
}
.ui-widget-content .ui-state-default{
    color:white;
    background:blue;
}
.ui-widget-content .ui-state-hover{
    color:black;
    background:yellow;
}
-->
</style>
<script>
$(function(){
    $('#dialog').dialog({
        buttons: {
            'OK': function() {$(this).dialog("close");},
            'キャンセル': function() {$(this).dialog("close");}
        },
        modal: true,
        autoOpen: false,
        height: 'auto',
        width: 350
    });

    $("#btn").click(function(){
        $('#dialog').dialog('open');
    });
});
</script>

なおダイアログを2つ以上使うケースで、特定のダイアログだけにスタイルを適用させたい場合は、dialog関数のdialogClassというオプションを使用する。 dialogClassで指定した名前に対してスタイルを定義すれば、このダイアログだけにそのスタイルを適用してくれる。以下サンプル。

サンプル（抜粋）

<style>
<!--
.myTitleClass .ui-dialog-titlebar {
    color:white;
    background:blue;
}
.myTitleClass .ui-state-default{
    color:white;
    background:blue;
}
.myTitleClass .ui-state-hover{
    color:black;
    background:yellow;
}
-->
</style>
<script>
$(function(){
    $('#dialog').dialog({
        dialogClass:'myTitleClass',
        buttons: {
            'OK': function() {$(this).dialog("close");},
            'キャンセル': function() {$(this).dialog("close");}
        },
        modal: true,
        autoOpen: false,
        height: 'auto',
        width: 350
    });

    $("#btn").click(function(){
        $('#dialog').dialog('open');
    });
});
</script>