「jQuery」UIダイアログをカスタマイズするサンプル

2014年1月7日2021年8月11日

書式
タイトルバー:.ui-dialog-titlebar{スタイルコード}
ボタンの色:.ui-widget-content .ui-state-default{cssコード}
使用例
1.CSSコード

<style>
<!--
.ui-dialog-titlebar {
    color:white;
    background:green;
}
.ui-widget-content .ui-state-default{
    color:white;
    background:red;
}
-->
</style>

2.JavaScriptコード

<script>
$(function(){
    $('#dialog').dialog({
        buttons: {
            'はい': function() {$(this).dialog("close");},
            'いいえ': function() {$(this).dialog("close");}
        },
        modal: true,
        autoOpen: false,
        height: 'auto',
        width: 300
    });

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