自定义jQuery UI对话框样式

Question

我有这个对话框：

var dialog1 = $('<div>').dialog({ 
    autoOpen: false, 
    modal: true,
    closeText: null,
    hide: "scale",
    show:"fade",
    height: 'auto',
    width: 450,
    dialogClass:"edialog"
}); 

当我想自定义样式时，内联样式会覆盖我的样式：

如何在不使用!important或编辑生成的内联样式的情况下强制对话框使用我的样式？

Answer 1

你没有。内联比选择器链具有最高优先级。我知道，覆盖它的唯一方法是修改元素的DOM或使用!important。

我想说如果他们经历了内联定义样式的麻烦，那是有充分理由的，可能不应该修改。

---

这是使用!important和使用jQuery更改内联样式之间的区别：

<强> jQuery的： $(".ui-dialog").css({ "position" : "fixed", "top" : "50%" });

<强>的CSS： .ui-dialog { position: fixed !important; top: 50% !important; }

对话选项（Barmar的评论）：

$(".my-form").dialog({ position: { my: "top", at: "top" } });

这取决于您对管理源代码的感受和想法。如果你不能通过Dialog对象公开的属性来实现它，CSS对我来说似乎是一个更简单，更优雅的解决方案。

Answer 2

1. 您可以在CSS
中找到自定义对话框

2. 例如，如果要编辑对话框的宽度，只需在宽度后添加“！important”：

   .ui-dialog {position：relative;填充：.2em;宽度：500px！important;}