Question

我正在尝试将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对话框。但是，当我用“.ui-dialog-titlebar”替换“.ui-dialog”时，它可以设置至少某个样式（标题栏）。

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

 </style>

为什么dialogClass不适用于.ui-dialog，但是对于.ui-dialog-titlebar？根据{{3}}，.ui-dialog和.ui-dialog-titlebar都是对话框的类。

Answer 1

类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;
}

演示：Fiddle - 我还没有解决css问题

Answer 2

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

你有没有试过这个？

CSS和Jquery：尝试将CSS类添加到对话框中

2 个答案:

CSS和Jquery：尝试将CS​​S类添加到对话框中

2 个答案:

CSS和Jquery：尝试将CSS类添加到对话框中