1

I'm having trouble with overriding the css theme with the .dialog() box. I followed instructions here http://api.jqueryui.com/dialog/#theming and I am not able to resolve this issue. I am using the dialogClass option with the .dialog() widget so it should append the styles I apply to them, like this:

Javascript Initialization:

$("#modal").dialog({
   dialogClass: "css" 
});

HTML:

<div id="modal"></div>

CSS:

.css .ui-dialog-content { 
    border:1px solid #ddd; 
    background-color:#333; 
    padding:50px !important; }

Ok so the documentation says I can style the .ui-dialog-content class and the objects, and it works, SOMEWHAT. The border and background-color works, but the padding doesn't work because it's styled in the element.style and even using !important doesn't over-ride it, so it's basically not letting me change any pre-existing settings to the modal classes, even when using !important, I am wondering if anyone knows how to get this to work, starting with getting the padding to work on the .ui-dialog-content class.

You can see a fiddle here: http://jsfiddle.net/Tsy52/

4

1 回答 1

1

让我们举个min-height例子。

它有一个内联样式min-height:28px

如果您想更改添加CSS到该类将无济于事，因为内联样式的特异性大于CSS

顺序是这样的

!important > inline styles > class property

使用!important是一种不好的模式，必须避免。在这种情况下，您可以CSS直接在元素上设置属性。

$('.ui-dialog-content').css("min-height", "100px")

对话框初始化后。

于 2013-08-09T07:27:28.630 回答