jquery - CSS 和 Jquery : Trying to add CSS class to dialog box

标签 jquery css dialog

我正在尝试将 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”替换为“.ui-dialog-titlebar”时,它至少可以设置某些样式(标题栏)。

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

 </style>

为什么 dialogClass 不适用于 .ui-dialog,但适用于 .ui-dialog-titlebar?根据here (see section titled "Theming") , .ui-dialog 和 .ui-dialog-titlebar 都是对话框的类。

最佳答案

dialogStyleui-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 问题

关于jquery - CSS 和 Jquery : Trying to add CSS class to dialog box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18479164/

相关文章:

android - 如何从自定义对话框中删除标题?

javascript - 使用javascript动态生成的按钮

css - 如何在没有纵横比的 SVG 中保持图像的纵横比

python - 如何使用 PyGTK/Gtkbuilder 重复显示对话框?

javascript - 使用 HTML 表单提前输入 - 根据选择自动填充下一个单元格

html - 使用 CSS 渐变生成网格线

validation - p :dialog gets closed on validation error of a submit with ajax ="false", 如何保持对话框打开?

php - 为什么 jQuery Ajax JSON 请求总是失败?

javascript - JQuery Mobile 3 下拉日期选择器?

javascript - 如何触发单击具有相同类别的链接?