自定义 jQuery UI 对话框样式答案

【问题标题】：Customize jQuery UI dialog style自定义 jQuery UI 对话框样式
【发布时间】：2013-08-15 02:48:28
【问题描述】：

我有这个对话框：

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

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

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

【问题讨论】：

标签： jquery css jquery-ui dialog

【解决方案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 对我来说似乎是一种更简单、更优雅的解决方案。

【讨论】：

内联样式用于可以指定为选项的样式，例如width: 450，以便选项优先于 CSS。
有没有办法从 jQuery UI 编辑生成的内联样式？
@majidgeek 如果您选择元素并通过 javascript 使用样式，则可以。这真的比使用!important 更好吗，这是您必须考虑的设计因素，但我说大多数情况下并非如此。
@majidgeek 查看更新后的帖子，了解使用 css 和 js 作为解决方案的示例。
@majidgeek Barmar 提出了一个很好的观点，jQuery Dialog 在创建对话框对象时确实提供了一个位置属性，它允许您选择它的位置。我建议您再次查看Dialog API，看看您是否可以通过其他方式解决此问题。

【解决方案2】：

您可以在 CSS 中找到自定义对话框
示例中，如果要编辑对话框的宽度，只需要在宽度后面加上“！important”即可：

.ui-dialog { 位置：相对；填充：.2em；宽度：500px !important;}

【讨论】：