0

CSS クラス .dialogStyle をダイアログ ボックスに追加しようとしていますが、何らかの理由で機能しません。

<!doctype html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <style>
.dialogStyle .ui-dialog { font-size: 62.5%; 
                          background-color: red;
                        }


  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>
  $(document).ready(function() {
    $( "#update-dialog" ).dialog({
      autoOpen: false,
      dialogClass: 'dialogStyle',
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Update": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
    $(".update-button").click(function () {
        $("#update-dialog").dialog("open");
  });
});
  </script>
</head>
<body>

<div id="update-dialog" title="Update COMMON_NAME">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<button class="update-button">Update COMMON_NAME</button>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>

これは期待どおりに CSS を ui-dialog に適用しません。ただし、「.ui-dialog」を「.ui-dialog-titlebar」に置き換えると、少なくとも何か (タイトルバー) のスタイルを設定できます。

 <style>
    .dialogStyle .ui-dialog-titlebar { font-size: 62.5%; 
                  background-color: red;
                }

 </style>

dialogClass が .ui-dialog では機能せず、.ui-dialog-titlebar で機能するのはなぜですか? here (「Theming」というタイトルのセクションを参照)によると、.ui-dialog と .ui-dialog-titlebar の両方がダイアログ ボックスのクラスです。

4

2 に答える 2

0 
.dialogStyle .ui-dialog { 
 font-size: 62.5% !important; 
 background-color: redb !important;
}

このように試しましたか？

于 2013-08-28T04:02:22.267 に答える