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-titlebar”替换“.ui-dialog”时，它至少可以设置一些样式（标题栏）。

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

 </style>

为什么 dialogClass 不适用于 .ui-dialog，但适用于 .ui-dialog-titlebar？根据这里（参见标题为“主题”的部分）， .ui-dialog 和 .ui-dialog-titlebar 都是对话框的类。

4

2 回答 2

2

两个类dialogStyle和ui-dialog都应用于同一个元素。查看对话框类属性ui-dialog ui-widget ui-widget-content ui-corner-all dialogStyle ui-draggable ui-dialog-buttons

尝试

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

演示：小提琴-我还没有修复 css 问题

于 2013-08-28T03:59:54.387 回答
0 
.dialogStyle .ui-dialog { 
 font-size: 62.5% !important; 
 background-color: redb !important;
}

你试过这样吗？

于 2013-08-28T04:02:22.267 回答