90362


ダイアログ１のボタンを押し、出てきた画面（OKやダイアログ１の背景など）を色を付けたいのですが、どなかたご教授いただけないでしょうか。

[code]

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    
    <script>
        $(function(){
            $("#div-dialog1").dialog({
                autoOpen: false,
                modal: true,
                title: "ダイアログ１",
                buttons: {
                    OK:function(){
                        $(this).dialog("close");
                    }
                }
            });
            $("#button1").click(function(){
                $("#div-dialog1").dialog("open");
            });
        });
    
    <body>
       <div id="div-dialog1">
           <p>ダイアログ１</p>
       </div>
    
    <input type="button" id="button1" value="ダイアログ１" />
    </body>
    
[/code]

1行目を記入した結果画像の通り表示されたのですがOKやキャンセルの後ろの色を変えることは可能でしょうか？  
[![](https://i.stack.imgur.com/bXtYJ.png)](https://i.stack.imgur.com/bXtYJ.png)


CC BY-SA 4.0
2022-08-03T05:48:37.163
90359
2022-08-09T08:19:56.947
2022-08-09T08:19:56.947
2238
question
javascript
ダイアログに色を付けたい


やり方は2つあります、CSSのクラスを作って、そのクラスをダイアログのパラメーターに入れますか、直線CSSのスタイル追加する。

下記のコードを試してみて下さい  
１行目の方法

[code]

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    
      <script>
        $(function(){
            $("#div-dialog1").dialog({
                autoOpen: false,
                modal: true,
                title: "ダイアログ１",
                dialogClass: 'myTitleClass',
                 buttons : [
                    {
                        text:'OK',
                        class:'okBtn',
                        click: function() {
                            alert("OK");
                            $(this).dialog("close");                        
                        }                   
                    },
                    {
                        text:'CANCEL',
                        class:'cancelBtn',
                        click: function() {
                            $(this).dialog("close");
                        }                   
                    }
                ]
    
            });
            
            $("#button1").click(function(){
                $("#div-dialog1").dialog("open");
            });
        });
        </script>
      
      <style>
        .myTitleClass .ui-dialog-titlebar {
            background:red;
        }
    
        .myTitleClass .ui-dialog-content {
            background:green !important;
        }
        
        .okBtn {
          background: blue !important;
        }
        
        .cancelBtn {
          background: yellow;
        }
      </style>
    
    <body>
       <div id="div-dialog1">
           <p>ダイアログ１</p>
       </div>
    
    <input type="button" id="button1" value="ダイアログ１" />
    </body>
    
[/code]

2行目の方法

[code]

      $(function(){
            $("#div-dialog1").dialog({
                autoOpen: false,
                modal: true,
                title: "ダイアログ１",
                buttons: {
                    OK:function(){
                        $(this).dialog("close");
                    }
                }
            }).prev(".ui-dialog-titlebar").css("background","red");
    
            $("#button1").click(function(){
                $("#div-dialog1").dialog("open");
            });
        });
    
[/code]

追加:  
バックグラウンドの色

[code]

    .myTitleClass .ui-dialog, .ui-widget-content {
      background:antiquewhite !important
    }
    
[/code]


CC BY-SA 4.0
2022-08-03T06:36:16.153
90362
2022-08-03T07:19:16.890
2022-08-03T07:19:16.890
40476
40476
90359
answer